歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
  如果想要實現網頁的二級導航,我們可以使用JS技術,動態的顯示和隱藏二級菜單,當然也可以使用CSS技術來實現。并且這里推薦使用CSS,因為其效率更高,更流暢。這里將介紹二級菜單的動態顯示與隱藏。
 
  1結構
 
  一般導航的主體我們主要是使用ulli標簽
 
  
 
  
 
  <body>
 
  <header>
 
  <!--一級導航開始-->
 
  <nav>
 
  <ulclass="menu">
 
  <li>
 
  <ahref="#">首頁</a>
 
  </li>
 
  <li>
 
  <ahref="#">產品</a>
 
  <!--二級導航開始-->
 
  <ulclass="submenu">
 
  <li><ahref="#">小程序</a></li>
 
  <li><ahref="#">微信</a></li>
 
  <li><ahref="#">企業站</a></li>
 
  </ul>
 
  <!--二級導航結束-->
 
  </li>
 
  <li>
 
  <ahref="#">服務</a>
 
  <!--二級導航開始-->
 
  <ulclass="submenu">
 
  <li><ahref="#">技術支持</a></li>
 
  <li><ahref="#">產品外包</a></li>
 
  </ul>
 
  <!--二級導航結束-->
 
  </li>
 
  <li><ahref="#">關于我們</a></li>
 
  <li><ahref="#">人才招聘</a></li>
 
  </ul>
 
  </nav>
 
  <!--一級導航結束-->
 
  </header>
 
  </body>
 
  2布局
 
  導航的布局,由于子元素要隨著父元素,所以對二級菜單選取定位布局。要想讓多個li在一行中顯示,那么就需要讓li進行浮動。
 
  
 
  
 
  body{margin:0;font-size:14px;color:#666}
 
  ul,ol{margin:0;padding:0;list-style:none;}
 
  a{text-decoration:none;color:#666;}
 
  /*一級導航*/
 
  /*背景色*/
 
  ul.menu,ul.submenu{
 
  background-color:#ededed;
 
  }
 
  /*一級導航浮動*/
 
  ul.menu::after{
 
  content:'';
 
  display:block;
 
  clear:both;
 
  }
 
  ul.menu>li{
 
  float:left;
 
  width:120px;
 
  line-height:3em;
 
  height:3em;
 
  text-align:center;
 
  cursor:pointer;
 
  }
 
  /*二級導航項分割線*/
 
  ul.submenu{
 
  /*默認隱藏*/
 
  display:none;
 
  }
 
  ul.submenu>li{
 
  border-bottom:1pxsolid#fff;
 
  }
 
  /*內容區*/
 
  .content{
 
  min-height:800px;
 
  background-color:#fff;
 
  }
 
  3.二級菜單顯示特效
 
  光標放到導航上,當前元素背景色變深,字體顏色變淡。
 
  如果有二級菜單,顯示二級菜單
 
  為了實現上述兩個特效,我們可以利用偽類選擇器(:hover)來捕捉光標懸浮的操作。并且使用偽類選擇器(:hover)來選擇到當前菜單對應的二級菜單
 
  利用如下CSS可以快速實現該特效。
 
  /*選中特效*/
 
  ul.menu>li:hover{
 
  background-color:#666;
 
  }
 
  ul.menu>li:hover>a{
 
  color:#fff;
 
  }
 
  ul.menu>li:hover>ul.submenu{
 
  display:block;
 
  }
 
  4.動畫
 
  上述代碼中二級菜單的顯示是瞬間的。能否提供一個緩慢動畫過渡的效果,當然也是沒問題。這里需要使用animation來進行動畫的配置,那么動畫幀可以自己寫或者是尋求第三方代碼庫(animate.css)的支持。這里我將使用透明度來實現這個淡入效果
 
  
 
  /*動畫幀*/
 
  @keyframesfade{
 
  from{
 
  opacity:0;
 
  }
 
  to{
 
  opacity:1;
 
  }
 
  }
 
  /*基礎動畫樣式*/
 
  .animated{
 
  animation-duration:1s;
 
  animation-fill-mode:both;
 
  }
 
  .fadeIn{
 
  animation-name:fade;
 
  animation-direction:normal;
 
  }
 
  動畫定義好后,可以直接將動畫樣式引用到ul.submenu上,注意,如果使用的是animate.css,那么上述步驟將省略,直接用其提供好的動畫樣式即可。
 
  <!--二級導航開始-->
 
  <ulclass="submenuanimatedfadeIn">
 
  <li><ahref="#">小程序</a></li>
 
  <li><ahref="#">微信</a></li>
 
  <li><ahref="#">企業站</a></li>
 
  </ul>
 
  <!--二級導航結束-->






本文轉載自中文網

如需轉載,請注明文章出處和來源網址:http://www.4389979.live/html/h55048.shtml

河南十一选五大小 中超积分榜2018 北京赛车pk10赛车开奖 买顶呱刮彩票技巧 捕鱼达人单机版全部 重庆哪里卖麻将机的多 姚记棋牌官方安卓版 哪个捕鱼达人不要网络玩 天天贵阳麻将苹果下载 遇乐棋牌注册 牛的对应数字