響應式導航選單程式碼例項

admin發表於2017-02-17
本章節分享一段程式碼例項，它實現了響應式導航選單效果。

因為當前裝置的尺寸各種各樣，所以響應式效果的作用就非常的明顯。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset=" utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>螞蟻部落</title> 
<style>
body{
  font:90%/160% Arial, Helvetica, sans-serif;
  color:#666;
  width:900px;
  max-width:96%;
  margin:0 auto;
}
p{
  margin:0 0 20px;
}
a{
  color: #69C;
  text-decoration: none;
}
a:hover{
  color: #F60;
}
h1, h2, h3{
  color:#000;
  line-height: 120%;
  margin: 30px 0 10px;
}
h1{
  font-size:1.7em;
  color:#000;
}
h2{
  font-size:1.4em;
  border-top:solid 1px #eee;
  padding-top:20px;
}
h3 {
  font-size: 1.1em;
}
 
/* nav */
.nav{
  margin: 20px 0;
}
.nav ul {
  margin: 0;
  padding: 0;
}
.nav li {
  margin: 0 5px 10px 0;
  padding: 0;
  list-style: none;
  display: inline-block;
  *display:inline; /* ie7 */
}
.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;
}
 
/* right nav */
.nav.right ul{
  text-align: right;
}
 
/* center nav */
.nav.center ul {
  text-align: center;
}
 
@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;
  }        
}
</style>
</head>
<body>
<nav class="nav">
  <ul>
    <li class="current"><a href="#">螞蟻部落</a></li>
    <li><a href="#">div教程</a></li>
    <li><a href="#">css教程</a></li>
    <li><a href="#">jquery教程</a></li>
    <li><a href="#">正規表示式教程</a></li>
  </ul>
</nav>
</body>
</html>

上面的程式碼非常的簡單，更多內容可以參閱相關閱讀。

媒體查詢可以參閱css3 Media Queries媒體查詢一章節。

相關文章