如何使用Sharepoint设计器在Sharepoint 2013中设计可折叠菜单

Question

我需要制作一个菜单，其中一旦菜单被点击，它将跨越显示子菜单，我还需要添加样式和颜色。我是新来的分享点，请详细说明在哪里编写代码和使用哪种语言。回应将不胜感激。

Answer 1

一个非常流畅而简单的方法是在页面中添加一个脚本编辑器webpart。

在该内容编辑器中，您可以使用jQuery Accordion菜单。代码只是“有效”，所以您只需填写HTML部分中的菜单项名称和链接即可。

这里，你会放置在web部件，改变链接是自己编码：

<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 &amp; 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 &amp; 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 &amp; 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>