问题描述
我需要制作一个菜单，一旦点击菜单，它将跨越显示子菜单，我还需要添加样式和颜色.我是 sharepoint 的新手，所以请详细说明在哪里编写代码和使用哪种语言.将不胜感激.
一种非常流畅且简单的方法是向页面添加脚本编辑器 webpart.
在该内容编辑器中，您可以使用 jQuery Accordion 菜单.代码只是有效"，所以您需要做的就是在 HTML 部分填写菜单项的名称和指向它们所在位置的链接.
这是您将放置在 webpart 中并将链接更改为您自己的代码:
<导航><ul id="导航"><li><a href="#">动画</a><ul><li><a href="http:/www.google.com/search?q=design+cartoons+animation">卡通</a></li><li><a href="http:/www.google.com/search?q=design+comic+strips+inspiration">漫画</a></li><li><a href="http:/www.google.com/search?q=how+to+clip+video+footage">视频剪辑</a></li><li><a href="http:/www.google.com/search?q=design+create+animated+gifs">网络 GIF</a></li><li><a href="#">平面设计</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">品牌&徽标</a></li><li><a href="http:/www.google.com/search?q=graphics+design+marketing">数字营销</a></li><li><a href="http:/www.google.com/search?q=graphic+design+illustrations">插图</a></li><li><a href="http:/www.google.com/search?q=infographics+inspiration">信息图表</a></li><li><a href="http:/www.google.com/search?q=product+design+inspiration">产品设计</a></li><li><a href="#">数码摄影</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">海洋</a></li><li><a href="http:/www.google.com/search?q=wide+angle+lens+photography">广角镜头</a></li><li><a href="http:/www.google.com/search?q=wildlife+photography">Wildlife</a></li><li><a href="#">打印&身份<ul><li><a href="http:/www.google.com/search?q=branding+identity+print+design">品牌</a></li><li><a href="http:/www.google.com/search?q=business+cards+design">名片</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">海报艺术</a></li><li><a href="#">编程</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 数据库</a></li><li><a href="http:/www.google.com/search?q=wordpress+programming">Wordpress CMS</a></li><li><a href="#">网页设计</a><ul><li><a href="http:/www.google.com/search?q=web+design+icons">图标</a></li><li><a href="http:/www.google.com/search?q=web+design+tutorials">教程</a></li><li><a href="http:/www.google.com/search?q=web+design+user+interface">用户界面</a></li><li><a href="http:/www.google.com/search?q=web+design">网站布局</a></li></nav><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>--><!--[如果是 IE 9]><script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--><脚本>$(document).ready(function(){$("#nav > li > a").on("click", function(e){if($(this).parent().has("ul")) {e.preventDefault();}if(!$(this).hasClass("open")) {//隐藏所有打开的菜单并删除所有其他类$("#nav li ul").slideUp(350);$("#nav li a").removeClass("open");//打开我们的新菜单并添加 open 类$(this).next("ul").slideDown(350);$(this).addClass("打开");}else if($(this).hasClass("open")) {$(this).removeClass("打开");$(this).next("ul").slideUp(350);}});});<风格>ol, ul, li {填充:0；}菜单，导航，部分 { 显示:块；}ol, ul { 列表样式:无；}块引用，q { 引号:无；}blockquote:before, blockquote:after, q:before, q:after { content: '';内容:无；}强 { 字体粗细:粗体；}表{边框折叠:折叠；边框间距:0；}h1 { font-family: 'Merienda', 'Trebuchet MS', Verdana, sans-serif;字体大小:2.95em；行高:1.7em；底边距:20px；字体粗细:粗体；字母间距:-0.03em；颜色:#675d90；文本阴影:2px 2px 0px rgba(255,255,255,0.65);文本对齐:居中；}#w { 显示:块；宽度:740px；边距:0 自动；填充顶部:45px；}/* 导航菜单样式 */#导航{显示:块；宽度:280px；边距:0 自动；-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 >立>一种 {显示:块；填充:16px 18px；字体大小:1.3em；字体粗细:粗体；颜色:#d4d4d4；文字装饰:无；边框底部:1px 实心 #212121；背景颜色:#343434；背景:-webkit-gradient(linear, left top, left bottom, from(#343434), to(#292929));背景:-webkit-linear-gradient(top, #343434, #292929);背景:-moz-线性渐变(顶部，#343434，#292929)；背景:-ms-线性梯度(顶部，#343434，#292929)；背景:-o-线性梯度(顶部，#343434，#292929)；背景:线性渐变(顶部，#343434，#292929)；}#nav >立>a:悬停，#nav >立>a.打开{颜色:#e9e9e9；边框底部颜色:#384f76；背景色:#6985b5；背景:-webkit-gradient(线性，左上，左下，从(#6985b5)，到(#456397))；背景:-webkit-linear-gradient(顶部，#6985b5，#456397)；背景:-moz-线性渐变(顶部，#6985b5，#456397)；背景:-ms-线性梯度(顶部，#6985b5，#456397)；背景:-o-线性梯度(顶部，#6985b5，#456397)；背景:线性渐变(顶部，#6985b5，#456397)；}#nav li ul { 显示:无；背景:#4a5b78；}#nav li ul li a {显示:块；背景:无；填充:10px 0px;padding-left: 30px;字体大小:1.1em；文字装饰:无；字体粗细:粗体；颜色:#e3e7f1；文本阴影:1px 1px 0px #000;}#nav li ul li a:hover {背景:#394963；}</style>
i need to make a menu where once a menu is clicked it will span to show sub menu and i need to add styles and colors as well. i am new to sharepoint so please elaborate in details where to write code and in which language. responses will be highly appreciated.
A very smooth and simple way to do this is by adding a Script Editor webpart to the page.
Inside that content editor, you can use a the jQuery Accordion menu. The code just "works" so all you need to do is fill in the HTML section for the names of the menu items and links to where they go.
Here's the code you would place in the webpart and change the links to be your own:
<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>这篇关于如何使用 sharepoint 设计器在 sharepoint 2013 中设计可折叠菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！