CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果

固定顶部悬浮菜单效果我们现在在各种网站都能看到这种效果就是我们移到指定位置之后就会显示出导航菜单了，下面我们就一起来看看吧．
花瓣网以前的菜单效果还不错，首先是展示出全部的菜单，然后当你向下滑动网页的时候，菜单自动吸顶固定悬浮在浏览器的顶部，这个用户也能很好的切换不同的分类，查看更多的内容，而对于网站来说，也提升了不少的用户体验和交互性。

CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果

制作方法
本文将来为大家简单的介绍一下如何制作出这样的效果。
HTML代码
首先我们编写一些基本的HTML代码，分别给网站的LOGO定义一个#header类，给菜单定义.nav类。

<div id="header"><h1>花瓣</h1></div>
<div class="nav"><ul><li><a>关注</a></li><li><a>最新</a></li><li><a>最热</a></li><li><a>视频</a></li><li><a>家居</a></li><li><a>旅行</a></li></ul>
</div>

CSS代码
对于网站的LOGO，我们让其居中显示，然后再定义一个颜色和底部边框。

#header{width:100%;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;text-align:center;
}

对于菜单部分，我们让所有的菜单项都在一行显示，并对a标签定义足够的填充和间距。

.nav{width:500px;background:#fff;margin:20px auto 0;border:solid 1px #ccc;zoom:1;border-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,0.1);color:#D74452;}
.nav:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.nav ul li{float:left;margin:0 20px;height:30px;line-height:30px;}
.nav ul li a{cursor:pointer;}
.nav ul li a:hover{text-decoration:underline;}

当用户向下滑动网页的时候，我们会给菜单添加一个类，这个能让菜单浮动到网页的顶部。

.nav_scroll{position:fixed;width:100%;margin:0;left:0;top:0;
}

JavaScript代码
首先我们需要引入jQuery库。

获取用户滑动网页的距离，如果大于网站LOGO的高度+导航的高度，那么就给导航添加一个nav_scroll类，如果小于这个高度，那么就移除nav_scroll类。

$(document).ready(function(){var topMain=$("#header").height()+20//是头部的高度加头部与nav导航之间的距离
var nav=$(".nav");
$(window).scroll(function(){if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除nav.addClass("nav_scroll");}else{nav.removeClass("nav_scroll");}
});
})

好了，以上就是使用CSS3和jQuery制作仿花瓣网固定顶部位置悬浮导航菜单的全部教程。

CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果相关推荐

html5导航栏悬浮置顶,jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单...
本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/D ...
html写顶部固定悬浮菜单栏,JS实现自动固定顶部的悬浮菜单栏效果
本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之 ...
纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html><head> ...
魅族商城html模板,jQuery实现Meizu魅族官方网站的导航菜单效果
本文实例讲述了jQuery实现Meizu魅族官方网站的导航菜单效果.分享给大家供大家参考.具体如下: 偶尔看到魅族官方网站,发现网站的导航菜单的效果很不错就扣下来,俩字:给力.鼠标放到菜单上,菜单的下 ...
html仿写京东左侧,jQuery模仿京东/天猫商品左侧分类导航菜单效果
现在天猫或者京东商品分类模块的默认的效果是这样的: 当鼠标滑过任意一栏导航分类时,就会出现相关详细分类模块,例如: 当鼠标移出蓝色框以外的区域,就会恢复默认的效果显示!然而使用jQuery的鼠标滑过事 ...
HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果.分享给大家供大家参考.具体如下: 这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单,相信你会喜欢的,蓝色,超级经典的一种风格 ...
python做花瓣飘落的背景_JavaScript_jquery+css3实现网页背景花瓣随机飘落特效，飘花效果的实现——效果图： - phpStudy...
jquery+css3实现网页背景花瓣随机飘落特效飘花效果的实现--效果图: 查看演示源码下载需求: 一个jquery,,,这个看标题么就知道了 jQuery Transit还有这个东西 jq ...
css3鼠标果果变手型代码_css3 鼠标悬浮动画效果
CSS3案例 Title body{ margin:0; } div{ width:150px; height:150px; background: #ffb568; font:30px/202px ...
仿花瓣网html模板,仿花瓣网的自动悬浮导航效果 jquery
仿花瓣网的自动悬浮导航效果 body, h1, ul { margin:0; } ul li { list-style-type:none; } #header { width:100%; borde ...
花瓣网方砖布局图片内容无限加载用户体验才是王道
jquery特效制作目前用户体验设计比较受欢迎的pinterest和花瓣网的图片内容无限加载,方砖式的布局方式.用jquery Masonry插件制作当鼠标拖动滚动条时图片和内容数据无限滚动加载,直到 ...

CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果

CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果相关推荐

最新文章

热门文章