zoukankan      html  css  js  c++  java
  • CSS 自适应导航菜单

    文章目录

    以前我写了一篇关于如何为自适应网页制作教程手机导航菜单,现在我又摸索出一种无需JS脚本的自适应导航菜单,它采用纯粹的语义化HTML5标签来完成。该菜单可以左对齐,居中或右对齐,也不像上一种方法中需要点击来展开列表,本例中悬停激活更加方便,而且它能通过标记表明当前位置。它适用于所有的移动和桌面浏览器,包括万恶的Internet Explorer!

    示例:自适应菜单             http://webdesignerwall.com/demo/responsive-menu/

    目的

    本教程的目的是展示如何将一个常规列表菜单变成下拉菜单,用来适应较小的屏幕,如下图效果:

    purpose-of-responsive-menu

    这种方案对下图所示的多条目导航栏效果显著,可以将多个条目合并成为一个优雅的下拉列表。

    purpose-of-responsive-menu-2

    HTML nav标签

    该标签用于导航栏,<nav>标签通过绝对位置position:absolute属性来创建下拉菜单,我将会在后文中解释;.current标签表示活动/当前页面链接。

    复制
    <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是相当直接明了,在此就不细表。请注意,这里为<li>元素指定display: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;
    }

    Internet Explorer的支持

    HTML5 <nav>标签和media query不被Internet Explorer 8或以下版本支持,当然考虑到他们的市场占有量已经很小,可以忽略这些。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]-->

    自适应

    现在这里是有趣的部分 – 让菜单根据media query规则来自适应!如果看过我以前的文章:自适应设计media query ,你不会对自适应感到陌生。

    以600px为分界点,设置nav元素设为相对位置position: relative,这样就可以把<ul>菜单列表用绝对位置position: absolute固定在顶部;并且使用display:none属性隐藏所有<li>元素,但保留.current <li>显示为块(block);然后是nav悬停属性,将所有<li>变回显示display:block,这将产生下拉列表;为.current元素添加了图标,以表明它是当前页面。对于菜单居中和右对齐问题,这里使用left和righ属性来定位<ul>。查看演示 ,看看最终效果。

    复制
    @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;
    	}	
    }
  • 相关阅读:
    Java 异常
    【转】Java 内部类总结
    【转】Java中的static关键字解析
    【转】事务及事务隔离级别
    【转】事务并发的问题
    【转】hibernate对象三种状态
    iOS指南针
    CoreLocation 定位
    swift 2.2 语法 (下)
    swift 2.2 语法 (中)
  • 原文地址:https://www.cnblogs.com/lsongyang/p/10094962.html
Copyright © 2011-2022 走看看