怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 264 JQUERY DREAMWEAVER
用jquery制作自动移动子菜单的导航栏
来源：互联网
2023-03-17 00:52:15 397
用jquery制作自动移动子菜单的导航栏
今天，我们要创建一个在选定其父菜单的基础上自动移动子菜单的导航栏。每个子菜单依次他们的父菜单的顺序水平堆叠。因此，当用户他们光标移动到一个父菜单的子菜单将出现其水平位置移动。
工具/原料
- dreamweaver cs5 jquerybr />/
步骤/方法
创建菜单
首先创建菜单和它的内容。创建菜单包含的div元素，菜单本身的无序列表元素。在这个例子中，我们要创建四个菜单。
div id="menu-wrapper">
ul class="menu">
li> a href="http://www.web0752.com/CSS Tutorial">CSS Tutorial/a> /li>
li> a href="http://www.web0752.com/jQuery Tutorial">jQuery Tutorial/a> /li>
li> a href="http://www.web0752.com/Code Snippet">Code Snippet/a> /li>
li> a href="http://www.web0752.com/Freebies">Freebies/a> /li>
/ul>
/div>
创建居中宽870像素，黑背景的DIV。
#menu-wrapper {
position: relative;
display: block;
z-index: 2;
height: 60px;
background-image: linear-gradient(to bottom, #535557, #333532);
font-family: "Pontano Sans";
font-size: 15px;
color: #fff;
text-align: center;
}
.menu {
display: block;
margin: 0 auto;
padding: 0;
width: 870px;
text-align: left;
list-style-type: none;
}
.menu li {
display: inline-block;
padding: 16px 10px 25px 10px;
cursor: pointer;
transition: 0.3s ease-in-out;
}
.menu li:hover, .selected {
background: #212525;
}
.menu a, .menu a:visited {
color: #fff;
text-decoration: none;
}
创建子菜单
每个子菜单都具有自己的无序列表，包含子菜单中的项目。子菜单中也将包含四个项目，每个人都将包含图像和它的标题。无序列表，每个子菜单，将水平堆积。
div id="submenu-wrapper">
ul class="submenu">
li>
a href="http://www.web0752.com/2012/05/photoshop-effect-vs-css3-properties/">
img src="http://www.web0752.com/images/9.jpg">
Photoshop Effect vs CSS3 Properties
/a>
/li>
!-- item submenu -->
/ul>
ul class="submenu">
!-- item submenu -->
/ul>
!-- another submenu -->
/div>
子菜单将有类似的主题，都在父页的中心位置。
#submenu-wrapper {
position: absolute;
right: 0;
left: 0;
display: block;
z-index: 1;
width: 850px;
height: 130px;
margin: 0 auto;
padding: 10px 10px;
background: rgba(33,37,37,0.9);
font-family: "Pontano Sans";
font-size: 13px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
box-shadow: 0px 2px 7px rgba(0,0,0,0.5);
}
.submenu {
display: block;
margin: 0 0 1.5em;
padding: 0;
list-style-type: none;
}
.submenu li {
display: inline-block;
width: 210px;
vertical-align: top;
text-align: center;
}
.submenu li img {
display: block;
margin: 0 auto 1em;
width: 200px;
border-radius: 5px;
border: 0;
}
.submenu li a, .submenu li a:visited {
color: #fff;
text-decoration: none;
}
子菜单就会像下面的图片：
加入代码overflow: hiddenon #submenu-wrapper隐藏其余子菜单，让其只显示一个无序列表。
当用户鼠标悬停子菜单出现，所以我们需要隐藏其他子菜单。设置margin topto -12em让子菜单将从底部往上显示。
jQuery做其余的执行
所有标记后成立了现在，我们将创建一些jQuery的代码隐藏和显示子菜单，并添加到选定的子菜单焦点。在这之前我们必须准备好接下来需要的变量。
menu = $('.menu li');
submenuWrapper = $('#submenu-wrapper');
submenu = submenuWrapper.children('ul');
firstSubmenu = submenu.eq(0);
firstSubmenu是第一个无序列表子菜单栈，我们将使用这个变量来控制显示无序列表和它上下移动。
读取鼠标事件
当用户悬停在菜单上，我们将检查子菜单是否已显示？但如果没有，那么我们将激活。显示子菜单后，我们会根据用户菜单选择显示出相应的无序列表。
menu.hover(
function() {
moveTo = $(this).index() * 11;
if(!submenuWrapper.hasClass('show'))
submenuWrapper.addClass('show').stop().animate({'marginTop' : '0'});
firstSubmenu.stop().animate({'marginTop' : '-' moveTo 'em' });
},
function() {
submenuWrapper.removeClass('show').stop().animate({'marginTop' : '-12em'});
});
如果用户移动光标移动到子菜单，它会滑动，以防止这一点，我们还需要附加像菜单那样的检查功能。
submenuWrapper.hover(
function() {
if(!submenuWrapper.hasClass('show'))
submenuWrapper.addClass('show').stop().animate({'marginTop' : '0'});
},
function() {
submenuWrapper.removeClass('show').stop().animate({'marginTop' : '-12em'});
});
正如你注意到我们有类似行代码前面的代码行3,4和7，他们的功能就是显示和隐藏子菜单。
function showsubmenu(item) {
if(!item.hasClass('show'))
item.addClass('show').stop().animate({'marginTop' : '0'});
}
function hidesubmenu(item) {
item.removeClass('show').stop().animate({'marginTop' : '-12em'});
}
因此，该代码将是：
menu.hover(function() {
moveTo = $(this).index() * 11;
showsubmenu(submenuWrapper);
firstSubmenu.stop().animate({'marginTop' : '-' moveTo 'em' });
},
function() { hidesubmenu(submenuWrapper);
});
submenuWrapper.hover(
function() { showsubmenu($(this)); },
function() { hidesubmenu($(this));
});
添加焦点
选定的子菜单项，将通过降低其他项不透明度的一个焦点。也增加其父菜单的焦点，让用户知道他们在哪里。
submenu
.children('li')
.hover( function() { $(this).siblings().stop().animate({'opacity':'0.5'}); },
function() { $(this).siblings().stop().animate({'opacity':'1'}); });
submenu
.hover( function() { menu.eq($(this).index()).addClass('selected') },
function() { menu.eq($(this).index()).removeClass('selected') });
如下图：
注意事项
CSS JS的东西一般都要注意兼容性，兼容所有流览器还要慢慢优化。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JQUERY
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 251 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 301 JQUERY