您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > 前端开发 > Javascript(JQuery)

3个简单的步骤实现固定菜单

作者:UncleToo  来源:原创  日期:2014-08-25 21:11:11
收藏  评论:( 0 )  阅读:460

       在网页设计中,固定菜单越来越受到设计者们的青睐,因为它能够为游客带来很好的用户体验。本站图教程板块即采用了固定菜单的设计。下面UncleToo为大家介绍如何创建一个简单的固定菜单。


HTML

首先我们需要用HTML将菜单内容设计好。

<div id="fixmenu">
<a href="http://www.uncletoo.com"><img src="images/img/logo.png" alt="" /></a>
<ul class="menu-fixed">
<li><a href="http://www.uncletoo.com">首页</a></li>
<li><a href="http://www.uncletoo.com/tu/index.html" id="srolltotop">图教程</a></li>
</ul>
</div>

这里我们ul标签包含所有的菜单内容,你也可以在这里增加任意更多的菜单项。


CSS

上面HTML文本创建好之后,我们还需要使用CSS来美化菜单的样式。

#fixmenu{
width: 1122px;
height:30px;
margin-left:-48px;
padding:5px 48px;
position:fixed;
top:0;
background:#7eb7d9;
display:none;
}
.menu-fixed{
width: 260px;
float: right;
text-align: right;
padding:4px 0 5px 0;
list-style-type:none;
}
.menu-fixed li{ display:inline; }
.menu-fixed a{
ont-size:0.9em;
color:#fff;
text-shadow:1px 1px #5E8BC5;
padding:0 0 0 10px;
}

这时,当我们运行程序文件,发现什么也看不到,因为在CSS中对 #fixmenu 容器做了display:none 的设置。因为我们想当滚动网页时才显示菜单。因此我们还需要jQuery的辅助。


JQUERY

$(document).ready(function() {
$(window).scroll(function(){
if(document.body.scrollTop > 300)
$('#fixmenu').fadeIn( "slow", function() { });
else
$('#fixmenu').fadeOut( "slow", function() { });
});
$('a#srolltotop').click(function(){
$('html, body').animate({scrollTop:0}, 100);
return false;
});
});

在添加这段jQuery代码之前,你必须要引入jQuery类库哦。


到此,一个简单的固定菜单做好了,希望这篇固定菜单的教程能够帮助到各位。




除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/jsjquery/1027.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论