时时商务社区

标题: js代码实现微博导航栏 [打印本页]

作者: bewin83 时间: 2018-2-14 05:43

         微博导航看起来很美观，实现起来也不麻烦，直接写代码了

   * {
      margin: 0px;
      padding: 0px
   }
   /*导航条*/
   #nav {
      line-height: 60px;
      list-style-type: none;
      background-color: #0000FF;
      text-align: center;
   }
   #nav a {
      color: white;
      text-decoration: none;
      display: block;
      width: 80px;
      font-size: 20px;
      font-weight: 800;
   }
   #nav a:hover {
      background-color: #ccc;
   }
   #nav li {
      background-color: blue;
      float: left;
      color: white;
      list-style-type: none;
   }
   #nav li ul {
      position: absolute;
      display: none;
      width: 130px;
   }
   .show {
      display: block;
   }




      首页



         全部广播



         好友



         关注




      微频道



         微频道1



         微频道2




      找人



         明星



         达人




      微群

         股票






以上代码就是用js实现微博导航栏，需要的朋友可以来参考下。


您可能感兴趣的文章:

JavaScript NodeTree导航栏(菜单项JSON类型/自制)

javascript 禁用IE工具栏,导航栏等等实现代码

一步步教大家编写酷炫的导航栏js+css实现

Fullpage.js固定导航栏-实现定位导航栏

js实现带缓动动画的导航栏效果

js实现导航栏中英文切换效果

欢迎光临时时商务社区 (http://bbs.4435.cn/)