找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 607|回复: 0
打印 上一主题 下一主题

js代码实现微博导航栏

[复制链接]

2500

主题

2513

帖子

7520

积分

论坛元老

Rank: 8Rank: 8

积分
7520
跳转到指定楼层
楼主
发表于 2018-2-14 05:43:28 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

            微博导航看起来很美观,实现起来也不麻烦,直接写代码了
   
   
   
   
   
      * {
        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 实现导航栏悬停效果
  • JS 实现导航栏悬停效果(续)
  • JS 实现导航栏悬停效果(续2)
  • js导航栏单击事件背景变换示例代码
  • 一步步教大家编写酷炫的导航栏js+css实现
  • Fullpage.js固定导航栏-实现定位导航栏
  • js实现带缓动动画的导航栏效果
  • js实现导航栏中英文切换效果
            
  • 分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    收藏收藏
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    用户反馈
    客户端