首页网站运营网站建设教程

网站运营

官方动态

网站建设教程

网站建设知识

网站建设与管理

JQuery自适应导航特效

现在移动端的网站和自适应的网站越来越多,对网站的制作要求也越来越高,越来越规范。以前为了实现在电脑上和手机上不同的导航特效,取巧分开写了两套导航样式。


当我们在足够大的显示器下看的时候,就会把电脑的导航条显示出来,隐藏手机导航的样式;当我们在手机上看的时候,把手机导航的样式显示出来,隐藏电脑导航的样式。


之前观察了很多网站手机导航样式,效果都不是很理想,有的二级菜单展开之后,大栏目失去了链接,只能点击下级栏目。所以就自己写了一套自适应的导航条特效。




有了之前写的《简单的jquery二级三级菜单特效》一文,我们已经能轻松的做出二级菜单的效果。如今就在此导航的结构基础上加强。我想要实现的效果是判断li下是否还有ul的子元素,如果有,就在li中插入一个i标签,让这个标签通过li的相对绝对定位,定位在a的覆盖面上,这样避免了a链接被点击到,同时保留了a链接。其次,再对插入的i标签添加点击事件,当插入的i标签被点击的时候,其他li元素下的ul全部隐藏,而当前li元素下的ul显示或隐藏。

具体代码如下:


<div class="nav">
<span><i></i><i></i><i></i></span>
<ul class="clearfix">
<li><a href="index.html" title="">网站首页</a></li>
<li>
<a href="single.html" title="">公司简介</a>
<ul>
<li><a href="index.html" title="">公司介绍</a></li>
<li><a href="single.html" title="">企业文化</a></li>
</ul>
</li>
<li>
<a href="products.html" title="">产品中心</a>
<ul>
<li><a href="index.html" title="">产品分类</a></li>
<li><a href="single.html" title="">产品分类</a></li>
<li><a href="single.html" title="">产品分类</a></li>
</ul>
</li>
<li>
<a href="news.html" title="">新闻中心</a>
<ul>
<li><a href="index.html" title="">公司动态</a></li>
<li><a href="single.html" title="">行业资讯</a></li>
</ul>
</li>
<li><a href="single.html" title="">联系我们</a></li>
</ul>
</div>


<style>
.nav{}
.nav span{position:absolute;top:15px;right:20px;display:block;width:30px;}
.nav span i{display:block;content:'';width:100%;height:2px;background:#666;margin:6px 0;transition:all 0.3s ease-out 0.1s;}
.nav span.on i:nth-of-type(1){transform:translateY(8.5px) rotate(45deg);}
.nav span.on i:nth-of-type(2){opacity: 0;}
.nav span.on i:nth-of-type(3){transform:translateY(-8.5px) rotate(-45deg);}
.nav ul{display:none;background:#fff;transition:all 0.3s ease-out 0.1s;}
.nav ul.show{display:block;}
.nav li{position:relative;border-top:1px solid #ddd;}
.nav li i{position:absolute;z-index:1;top:0;right:0;display:inline-block;line-height:40px;width:40px;height:40px;text-align:center;background:#eee;font-style:normal;}
.nav li a{display:block;font-size:16px;padding:0 20px;line-height:40px;}
.nav li a.on{display:block;color:#dc0203;}
.nav ul ul{background:#eee;display:none;}
.nav ul ul.on{display:block;}
</style>


<script type="text/javascript">
$(document).ready(function(){

$(".nav ul li").each(function () {
if ($(this).find("ul").length > 0) {
$(this).prepend("<i>+</i>");
//$(this).find("a").eq(0).attr("href", "javascript:;");
}
});

$('.nav span').click(function(){
if(!$('.nav span').hasClass('on')){
$('.nav span').addClass('on');
$('.mask').addClass('maskshow');
$('.nav>ul').addClass('show');
}else{
$('.nav span').removeClass('on');
$('.mask').removeClass('maskshow');
$('.nav>ul').removeClass('show');
}
})

$('body').on('click','.nav ul li i',function(){
if(!$(this).parent().find('ul').hasClass('on')){
$('.nav ul li').find('ul').removeClass('on');
$('.nav ul li i').text('+');
$(this).parent().find('ul').addClass('on');
$(this).text('-');
}else{
$(this).parent().find('ul').removeClass('on');
$(this).text('+');
}
})

$('.mask').click(function(e){
if(e.target.id.indexOf(".nav ul")==-1){
$('.nav span').removeClass('on');
$('.wechat').removeClass('wechatshow');
$(".mask").removeClass('maskshow');
$(".nav ul").removeClass('show');
}
});
})
</script>


附上《JQuery自适应导航特效》源码下载。

源码的效果目前还不是特别如意,在动态改变窗口大小的情况下不会有效果,后期有待改进增强。


发表时间

20190620

文章标签

jquery

被浏览次数

点我搜索

“CSS”相关的文章

  • 昆山网站建设小编讲讲IIS如何使用

    2018-12-14

    通过前文《如何在win7系统里创建ASP程序测试环境》我们学会了在win7系统里面安装IIS,那么如何使用IIS来创建运行网站呢?...

  • Ps Play无法连接的问题

    2018-04-05

    前段时间发了一个替代Ps Play的移动端设计稿预览工具,不过做为日常不太使用PsMirror的人来说,可能不会去专门购买,所以还是用回了Ps Play,也顺便解决了无法连接预览的问题。...

  • 替代Ps play的设计稿实时预览工具PsMirror

    2018-01-31

    PsMirror是一款实时预览photoshop设计稿的工具。 它让你极方便地在手机上查看PS中的设计稿, 提升设计效率。 支持android/ios两个平台......

  • 配置PHPStorm2017主题(颜色字体)

    2017-12-24

    PHPstorm默认的主题和可选的主题有时候不能满足有些人的需求,怎么配置自己喜欢的主题呢?首先先去下载自己喜欢的主题:http://www.phpstorm-themes.com/...

  • 使用css解决视频大小自适应

    2017-03-07

    自适应网站有的时候会碰到视频页面,那么怎么样才能让页面中的视频也能自适应设备屏幕尺寸呢?...

  • 如何优化自己的网站

    2016-12-19

    一个网站如果我们访问的时候,他的页面打开速度很慢,或者页面看起来很糟糕,看起来很费劲,让人不舒服,那么都是会影响访客的体验,使访客失去继续访问的兴趣,那么怎么优化自己的网站就是一件很重要的事。...

WCDSTUDIO专注于互联网服务

立即沟通您的需求
版权所有 WCDSTUDIO © All Rights Reserved 2015-2020CSS快速查询CSS选择符演示html常用标签演示flexui