好好本性的领航菜单,用jquery做淡入淡出效果鼠

2019-11-28 03:38栏目:网络时代
TAG:

我用jquery做了一个淡入淡出效果,就是鼠标放上去会淡入一个层(层里只有一张背景图和几个文字),鼠标移开就淡出那个层.
但是只要鼠标放在li上面,鼠标的图案(手型,箭头,I字)就一直在变(闪动),一直在调试,还没有解决。有时放上去又不闪,有时又会闪,真不知道什么原因

功能目标:列出二级菜单,点击某个菜单其他菜单均关闭,次菜单改变状态(即若为关闭则变为打开,若为打开则关闭)。

浏览者是否对网站感兴趣,前20秒的第一印象至关重要,所以我们的设计要符合大众的期望。下面我们将设计一个个性的导航菜单。

html: Copy to Clipboard澳门新葡亰平台官网 1引用的内容:[www.bkjia.com] <ul class="aaa">
<li><div>这是淡入的层</div><a>列表一</a></li>
<li><div>这是淡入的层</div><a>列表二</a></li>
<li><div>这是淡入的层</div><a>列表三</a></li></ul>
css: Copy to Clipboard澳门新葡亰平台官网 2引用的内容:[www.bkjia.com] .aaa div{display:none}
jquery: Copy to Clipboard澳门新葡亰平台官网 3引用的内容:[www.bkjia.com]澳门新葡亰平台官网, $(".aaa li").hover(function(){
$(this).find(div).fadeOn(800)
},
function(){
$(this).find(div).fadeOn(200)
})

自我评价:写的有点儿初级,但是我们的目标是规范代码、更精简、更简单。

(一):XHTML:

// 还加了一个去除焦点的代码
$("a").focus(function(){
if(this.blur){ this.blur();}
})

HTML部分:

Copy to Clipboard澳门新葡亰平台官网 4引用的内容:[www.bkjia.com] <div id="sidebar">
<ul>
<li><a href="index.html" class="normalMenu">Home</a></li>
<li><a href="services.html" class="normalMenu">Services</a></li>
<li><a href="faq.html" class="normalMenu">FAQ</a></li>
<li><a href="testimonials.html" class="selectedMenu">Testimonials</a></li>
澳门新葡亰平台游戏,<li><a href="about.html" class="normalMenu">About Alpacas</a></li>
<li><a href="contact.html" class="normalMenu">Contact Us</a></li>
</ul>
</div>

. 但是只要鼠标...

Copy to Clipboard澳门新葡亰平台官网 5引用的内容:[www.bkjia.com] <div style="width: 100px;">
<div id="MM">
<a>第一个菜单</a>
<div class="Menu">
<ul>
<li>子菜单1</li>
<li>子菜单1</li>
</ul>
</div>
<a>第二个菜单</a>
<div class="Menu">
<ul>
<li>子菜单2</li>
<li>子菜单2</li>
</ul>
</div>
<a>第三个菜单</a>
<div class="Menu">
<ul>
<li>子菜单3</li>
<li>子菜单3</li>
<li>子菜单3</li>
</ul>
</div>
</div>
</div>

(二):JQuery

JQuery代码:

Copy to Clipboard澳门新葡亰平台官网 6引用的内容:[www.bkjia.com] $(document).ready(function(){

Copy to Clipboard澳门新葡亰平台官网 7引用的内容:[www.bkjia.com] <script type="text/javascript" src=";
<script type="text/javascript">
$(document).ready(function() {
$("a").click(function() {
$(".Menu").not($(this).next(".Menu")).slideUp("fast");//除去a的下一个div页面其他div变为隐藏。。。
$(this).next(".Menu").slideToggle("fast");//所选div改变显示状态
});
});//bkjia.com
</script>

$('#navigationMenu li .normalMenu').each(function(){
// create a duplicate hyperlink and position it above the current one
$(this).before($(this).clone().removeClass().addClass('hoverMenu'));

Css代码:

});

Copy to Clipboard澳门新葡亰平台官网 8引用的内容:[www.bkjia.com] <style type="text/css">
.Menu display: none;}
</style>

$('#navigationMenu li').hover(function(){
// we assign an action on mouse over
$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);
// the animate method provides countless possibilities
},

css只有一句,即初次加载时所有菜单关闭状态。

function(){
// and an action on mouse out
$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);

Jquery的选择器非常强大,如果运用自如使其更好的配合定会大大减少代码量,使代码清晰简单。

});

转自:

});

自我评价:写的有...

(三)CSS:

Copy to Clipboard澳门新葡亰平台官网 9引用的内容:[www.bkjia.com] /* Page styles */

body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
}

body{
margin-top:20px;
font-family:Arial, Helvetica, sans-serif;
color:#51555C;
height:100%;
font-size:12px;
}

/* Navigation menu styles */

ul{
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

ul li{
border:1px solid #444444;
display:inline-block;
float:left;
height:25px;
list-style-type:none;
overflow:hidden;
}

ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none;
}

.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
outline:none;
padding:5px 10px;
display:block;
}

.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:url(img/grey_bg.gif) repeat-x #eeeeee;
color:#444444;
}

.selectedMenu,.selectedMenu:visited {
margin:0;
}

.normalMenu, .normalMenu:visited{
color:white;
background:url(img/dark_bg.gif) repeat-x #444444;
}

(四) 效果图

澳门新葡亰平台官网 10 

(一)...

版权声明:本文由澳门新葡亰平台游戏发布于网络时代,转载请注明出处:好好本性的领航菜单,用jquery做淡入淡出效果鼠