联系电话: +86 010-56570809
关注:

网站建设

李新站长:如何制作响应式导航菜单

李新站长:如何制作响应式导航菜单

  • by 李小新
  • 2014-08-17 13:42
  • 214

最近在琢磨怎样制作一个响应式的移动导航栏,现在我发现了一个新的技术(有关HTML5)可以在没有使用Javascript的情况下做一个响应式菜单。这个菜单可以自动排列到左边、中间或者右边)。不像之前的教程需要点击某“开关”来显示或隐藏菜单,现在只需要把鼠标移到菜单按钮就会出现菜单列表(而且会提示当前所在的导航位置)。它可以在所有移动设备和桌面浏览器(包括IE)正常使用!

Demo地址:http://webdesignerwall.com/demo/responsive-menu/ (用手机浏览器访问,或者缩小浏览器窗口访问)

目的

这篇文章的目的是向你展示怎样让一个菜单列表在小屏幕时自动转换成有规律的下拉列表菜单。

这个技巧对于那些有很多链接链接项的导航栏是很有用的,因为你可以让它们全部整合到一个下拉列表框控件中。

Html代码

 

下面是导航的Html元素。<Nav>标签是通过CSS的绝对定位属性来请求创建一个下拉列表框,我会在文章结尾解释这个做法。.current class标志它是一个当前所在的菜单导航位置。


<nav class="nav"> 
    <ul> 
        <li class="current"><a href="#">Portfolio</a></li> 
        <li><a href="#">Illustration</a></li> 
        <li><a href="#">Web Design</a></li> 
        <li><a href="#">Print Media</a></li> 
        <li><a href="#">Graphic Design</a></li> 
    </ul> 
</nav>

CSS代码

这个导航CSS代码很容易看懂,就不说细节了。需要注意我给nav<li>使用 displa:inline-block替换了 float:left 。这样允许菜单按钮通过在<ul>的元素 text-align在指定位置显示。

/* nav */
.nav { 
    position: relative; 
    margin: 20px 0; 

.nav ul { 
    margin: 0; 
    padding: 0; 

.nav li { 
    margin: 0 5px 10px 0; 
    padding: 0; 
    list-style: none; 
    display: inline-block; 

.nav a { 
    padding: 3px 12px; 
    text-decoration: none; 
    color: #999; 
    line-height: 100%; 

.nav a:hover { 
    color: #000; 

.nav .current a { 
    background: #999; 
    color: #fff; 
    border-radius: 5px; 
}

居中和居右

你可是使用 text-align 属性来改变按钮的对齐方式


/* right nav */
.nav.right ul { 
    text-align: right; 

 
/* center nav */
.nav.center ul { 
    text-align: center; 
}

IE支持

IE8及以下版本不支持HTML5的<nav>标签和媒体查询,可以通过包含css3-mediaqueries.js (或者respond.js) 和html5shim.js 来提供可降级支持。如果你不想使用html5shim.js,你也可以使用<div>标签来代替<nav>标签。

<!--[if lt IE 9]> 
    <script src="http://css3-mediaqueries-js.googlecode.com/files/css3-mediaqueries.js"></script> 
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]-->

响应式

有趣的地方来了---通过媒体查询使菜单可响应!

在低于600px时进行断点判断,设置nav元素的position属性值为relative,将<ul>菜单列表position属性值设为absolute然后显示在顶部。通过 display:none 隐藏所有<li>元素,但保持类为 .current的<li>元素让它作为一个区域显示。然后在hover (鼠标移上去时执行)设置所有<li>重新显示出来(产生下拉列表的效果)。添加一个icon图在.current元素表明它是现在在访问的活动区域。访问demo看下最终效果。

@media screen and (max-width: 600px) { 
    .nav { 
        position: relative; 
        min-height: 40px; 
    }    
    .nav ul { 
        width: 180px; 
        padding: 5px 0; 
        position: absolute; 
        top: 0; 
        left: 0; 
        border: solid 1px #aaa; 
        background: #fff url(images/icon-menu.png) no-repeat 10px 11px; 
        border-radius: 5px; 
        box-shadow: 0 1px 2px rgba(0,0,0,.3); 
    } 
    .nav li { 
        display: none; /* hide all <li> items */
        margin: 0; 
    } 
    .nav .current { 
        display: block; /* show only current <li> item */
    } 
    .nav a { 
        display: block; 
        padding: 5px 5px 5px 32px; 
        text-align: left; 
    } 
    .nav .current a { 
        background: none; 
        color: #666; 
    } 
 
    /* on nav hover */
    .nav ul:hover { 
        background-image: none; 
    } 
    .nav ul:hover li { 
        display: block; 
        margin: 0 0 5px; 
    } 
    .nav ul:hover .current { 
        background: url(images/icon-check.png) no-repeat 10px 7px; 
    } 
 
    /* right nav */
    .nav.right ul { 
        left: auto; 
        right: 0; 
    } 
 
    /* center nav */
    .nav.center ul { 
        left: 50%; 
        margin-left: -90px; 
    } 
     
}


标签: 响应式 李新站长

分享这篇文章:

分享请注明出处:

欢迎互联网爱好者能够跟我一起讨论模版建站、网络营销推广的知识,希望能够通过简单沟通互相学习!


相关的文章



相关评论

搜索

新发现工作室成立于2012年,专注于分享国内外优秀网站主题模板,所收集的主题包括涵盖范围广,包括:WordPress主题、discuz模板、dedecms模板等,同时新发现工作室也提供网站建设、网站模版汉化、仿站服务...

阅读更多

联系我们
  • 地址: 中国, 北京市,朝阳区,
    管庄乡, 畅春园
  • 手机: (010) 56570809
  • 邮箱: ilixing@sina.com
  • 周一 - 周五: 9:00 am - 10:00 pm
    周六 - 周日: 休息
热门主题
© 2015. «光山居士». 保留所有权利.