一個(gè)簡(jiǎn)單的響應(yīng)式菜單,僅使用@media query實(shí)現(xiàn).

上圖的作用就是將普通的菜單在縮小瀏覽器屏幕到一定寬度,或者是在移動(dòng)設(shè)備上的顯示效果.現(xiàn)在分步進(jìn)行實(shí)現(xiàn):

第一步:先構(gòu)建一個(gè)普通的菜單,具體顯示如圖:

結(jié)構(gòu)如下:

<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> /* 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; }

第二步:實(shí)現(xiàn)響應(yīng)式.

下面的例子展示了當(dāng)屏幕為600px或者小于600px時(shí),菜單就顯示為第一幅圖中右邊的結(jié)果,CSS代碼如下:

@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;}}

試著縮小你的瀏覽器到600px或者小于600px,這是你的菜單應(yīng)用了600px時(shí)的樣式.

第三步:兼容性

<nav>和media query是HTML5的內(nèi)容,IE8及以下不支持.需要添加一下JS來(lái)兼容.

<!--[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]-->

總結(jié):

這只是個(gè)簡(jiǎn)單的響應(yīng)式例子,你可以根據(jù)自己的頁(yè)面布局應(yīng)用不同的media query,來(lái)實(shí)現(xiàn)頁(yè)面的響應(yīng)式布局.

?

轉(zhuǎn)載于:https://www.cnblogs.com/huangxi/p/4222174.html

總結(jié)

以上是生活随笔為你收集整理的响应式布局---菜单的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。