J'ai besoin de faire un menu où une fois qu'un menu est cliqué, il s'étendra pour afficher le sous-menu et j'ai besoin d'ajouter des styles et des couleurs. Je suis nouveau à sharepoint donc s'il vous plaît élaborer dans les détails où écrire le code et dans quelle langue. les réponses seront très appréciées.Comment concevoir un menu rétractable dans sharepoint 2013 en utilisant le designer sharepoint
Une façon très simple et très simple d'y parvenir est d'ajouter un webpart de l'éditeur de script à la page.
À l'intérieur de cet éditeur de contenu, vous pouvez utiliser le menu Accordéon jQuery. Le code "fonctionne" donc tout ce que vous devez faire est de remplir la section HTML pour les noms des éléments de menu et des liens vers où ils vont.
Voici le code que vous placez dans le webpart et de modifier les liens pour être votre propre:
<div id="w">
<nav>
<ul id="nav">
<li><a href="#">Animation</a>
<ul>
<li><a href="http:/www.google.com/search?q=design+cartoons+animation">Cartoons</a></li>
<li><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">Comic Strips</a></li>
<li><a href="http:/www.google.com/search?q=how+to+clip+video+footage">Video Clips</a></li>
<li><a href="http:/www.google.com/search?q=design+create+animated+gifs">Web GIFs</a></li>
</ul>
</li>
<li><a href="#">Graphic Design</a>
<ul>
<li><a href="http:/www.google.com/search?q=photoshop+tutorials+graphics+design">Adobe Photoshop</a></li>
<li><a href="http:/www.google.com/search?q=digital+branding+graphics+logos">Branding & Logos</a></li>
<li><a href="http:/www.google.com/search?q=graphics+design+marketing">Digital Marketing</a></li>
<li><a href="http:/www.google.com/search?q=graphic+design+illustrations">Illustrations</a></li>
<li><a href="http:/www.google.com/search?q=infographics+inspiration">Infographics</a></li>
<li><a href="http:/www.google.com/search?q=product+design+inspiration">Product Design</a></li>
</ul>
</li>
<li><a href="#">Digital Photography</a>
<ul>
<li><a href="http:/www.google.com/search?q=cityscape+photography">Cityscapes</a></li>
<li><a href="http:/www.google.com/search?q=water+ocean+photography">Oceans</a></li>
<li><a href="http:/www.google.com/search?q=wide+angle+lens+photography">Wide-Angle Lens</a></li>
<li><a href="http:/www.google.com/search?q=wildlife+photography">Wildlife</a></li>
</ul>
</li>
<li><a href="#">Print & Identity</a>
<ul>
<li><a href="http:/www.google.com/search?q=branding+identity+print+design">Branding</a></li>
<li><a href="http:/www.google.com/search?q=business+cards+design">Business Cards</a></li>
<li><a href="http:/www.google.com/search?q=print+design+letterpress">Letterpress</a></li>
<li><a href="http:/www.google.com/search?q=print+poster+artwork">Poster Art</a></li>
</ul>
</li>
<li><a href="#">Programming</a>
<ul>
<li><a href="http:/www.google.com/search?q=learn+css3+web+development">CSS3</a></li>
<li><a href="http:/www.google.com/search?q=learn+html5+web+development">HTML5</a></li>
<li><a href="http:/www.google.com/search?q=javascript+jquery+tutorials">JavaScript & jQuery</a></li>
<li><a href="http:/www.google.com/search?q=web+development+mysql">MySQL Databases</a></li>
<li><a href="http:/www.google.com/search?q=wordpress+programming">Wordpress CMS</a></li>
</ul>
</li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="http:/www.google.com/search?q=web+design+icons">Icons</a></li>
<li><a href="http:/www.google.com/search?q=web+design+tutorials">Tutorials</a></li>
<li><a href="http:/www.google.com/search?q=web+design+user+interface">User Interfaces</a></li>
<li><a href="http:/www.google.com/search?q=web+design">Website Layouts</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- <script type="text/javascript" language="javascript" charset="utf-8" src="nav.js"></script> -->
<!--[if lt IE 9]>
<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
$(document).ready(function(){
$("#nav > li > a").on("click", function(e){
if($(this).parent().has("ul")) {
e.preventDefault();
}
if(!$(this).hasClass("open")) {
// hide any open menus and remove all other classes
$("#nav li ul").slideUp(350);
$("#nav li a").removeClass("open");
// open our new menu and add the open class
$(this).next("ul").slideDown(350);
$(this).addClass("open");
}
else if($(this).hasClass("open")) {
$(this).removeClass("open");
$(this).next("ul").slideUp(350);
}
});
});
</script>
<style>
ol, ul, li {
padding: 0;
}
menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
h1 { font-family: 'Merienda', 'Trebuchet MS', Verdana, sans-serif; font-size: 2.95em; line-height: 1.7em; margin-bottom: 20px; font-weight: bold; letter-spacing: -0.03em; color: #675d90; text-shadow: 2px 2px 0px rgba(255,255,255,0.65); text-align: center; }
#w { display: block; width: 740px; margin: 0 auto; padding-top: 45px; }
/* nav menu styles */
#nav {
display: block;
width: 280px;
margin: 0 auto;
-webkit-box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
-moz-box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
box-shadow: 3px 2px 3px rgba(0,0,0,0.7);
}
#nav li { }
#nav > li > a {
display: block;
padding: 16px 18px;
font-size: 1.3em;
font-weight: bold;
color: #d4d4d4;
text-decoration: none;
border-bottom: 1px solid #212121;
background-color: #343434;
background: -webkit-gradient(linear, left top, left bottom, from(#343434), to(#292929));
background: -webkit-linear-gradient(top, #343434, #292929);
background: -moz-linear-gradient(top, #343434, #292929);
background: -ms-linear-gradient(top, #343434, #292929);
background: -o-linear-gradient(top, #343434, #292929);
background: linear-gradient(top, #343434, #292929);
}
#nav > li > a:hover, #nav > li > a.open {
color: #e9e9e9;
border-bottom-color: #384f76;
background-color: #6985b5;
background: -webkit-gradient(linear, left top, left bottom, from(#6985b5), to(#456397));
background: -webkit-linear-gradient(top, #6985b5, #456397);
background: -moz-linear-gradient(top, #6985b5, #456397);
background: -ms-linear-gradient(top, #6985b5, #456397);
background: -o-linear-gradient(top, #6985b5, #456397);
background: linear-gradient(top, #6985b5, #456397);
}
#nav li ul { display: none; background: #4a5b78; }
#nav li ul li a {
display: block;
background: none;
padding: 10px 0px;
padding-left: 30px;
font-size: 1.1em;
text-decoration: none;
font-weight: bold;
color: #e3e7f1;
text-shadow: 1px 1px 0px #000;
}
#nav li ul li a:hover {
background: #394963;
}
</style>
Merci beaucoup. – user3906063