编程 Javascript

javascript HTML+CSS实现经典橙色导航菜单

Posted in Javascript onFebruary 16, 2016

本文实例介绍了javascript结合HTML CSS实现橙色导航菜单，分享给大家供大家参考，具体内容如下

效果图：

<html >
<head>
 <title>超漂亮的HTML导航菜单CSS代码</title>
 <style>
  #top {
   display: block;
   text-align: left;
   height: 105px;
   position: relative;
   z-index: 0;
  }
 
  .m {
   margin: 0 auto;
   width: 970px;
  }
 
  body {
   font-size: 12px;
  }
 
  a {
   color: #333;
   text-decoration: none;
  }
 
   a:link {
    text-decoration: none;
   }
   /* Download by http://hovertree.com*/
   a.blue:link, a.blue:visited {
    color: #014cc9;
    text-decoration: none;
   }
 
   a.blue:hover, a.blue:active {
    color: #014cc9;
    text-decoration: underline;
   }
 
   a.org:link, a.org:visited {
    color: #ff4e00;
    text-decoration: none;
   }
 
   a:hover, a:active, a.org:hover, a.org:active {
    color: #ff4e00;
    text-decoration: underline;
   }
 
  #navpart {
   background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) repeat-x center top;
   height: 105px;
   width: 950px;
   z-index: 0;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
   clear: both;
   position: relative;
  }
 
   #navpart .sideleft {
    background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat left bottom;
    float: left;
    height: 105px;
    width: 6px;
   }
 
   #navpart .sideright {
    background: url(http://hovertree.com/hvtimg/bjafjb/6hcuxj1x.gif) no-repeat right bottom;
    float: right;
    height: 105px;
    width: 6px;
   }
 
  #navmenubar {
   height: 32px;
   float: left;
   display: inline;
   margin: 0 -6px;
   width: 100%;
   position: relative;
   z-index: 3;
   top: 0;
  }
 
  #hot {
   background: url(http://hovertree.com/hvtimg/201508/7qmwfe9p.png) no-repeat left top;
   height: 21px;
   width: 19px;
   position: absolute;
   top: -5px;
   right: 2px;
   z-index: 666;
   background:black;
  }
 
  #navmenubar .sideleft {
   background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat left bottom;
   float: left;
   height: 32px;
   width: 6px;
   display: inline;
   margin: 0 0 0 8px;
  }
 
  #navmenubar .sideright {
   background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) no-repeat right bottom;
   float: left;
   height: 32px;
   width: 6px;
   display: inline;
   margin: 0 4px 0 -2px;
  }
  /* NAVMENU */
  #navmenubar .navmenu {
   background: url(http://hovertree.com/hvtimg/bjafjb/ay73nxk5.gif) repeat-x center top;
   height: 32px;
   padding: 0;
   margin: 0;
   float: left;
   display: inline;
  }
 
   #navmenubar .navmenu li {
    float: left;
    white-space: nowrap;
    margin: 0px;
    padding: 0px;
    display: inline;
   }
 
    #navmenubar .navmenu li a {
     background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 0;
     width: 80px;
     padding: 7px 2px 5px 0;
     float: left;
     line-height: 20px;
     height: 20px;
     text-align: center;
    }
 
     #navmenubar .navmenu li a:hover {
      background-position: 0 -32px;
      color: #602800;
      text-decoration: none;
      padding: 8px 2px 4px 0;
     }
 
   #navmenubar .navmenu .current a, #navmenubar .navmenu .current a:hover {
    background: url(http://hovertree.com/hvtimg/bjafjb/d46iuj2w.gif) no-repeat 0 -64px;
    font-weight: 600;
    color: #FFF;
    font-size: 14px;
    padding: 7px 2px 5px 0;
   }
 
  #top #navpart .content {
   margin-top: 40px;
   margin-right: auto;
   margin-bottom: 0px;
   margin-left: auto;
   width: 900px;
   height: auto;
   color: white;
  }
 
   #top #navpart .content a {
    color: white;
    display: inline-block;
    margin-top: 0px;
    height: 30px;
    border: 0px solid white;
    line-height: 30px;
    padding: 10px;
   }
 
  .clear {
   clear: both;
   display: block;
   font: 0px/0 sans-serif;
   height: 0px;
   overflow: hidden;
  }
 </style>
 
</head>
<body>
 <div id="top" class="m">
  <div id="navpart">
   <div class="sideleft"></div>
   <div class="sideright"></div>
   <!--NavMenu-->
   <div id="navmenubar">
    <div class="sideleft"></div>
    <ul class="navmenu">
     <li class="current"><a href="#" target="_top" title="首页">三水点靠木</a></li>
     <li><a href="#"><span>编程资源</span></a></li>
     <li><a href="#"><span>在新手册</span></a></li>
    </ul>
    <div class="sideright"></div>
    <div class="sideleft"></div>
    <ul class="navmenu">
     <li><a href="#"><span>网页制作</span></a></li>
     <li><a href="#"><span>网络编程</span></a></li>
     <li><a href="#"><span>平面设计</span></a></li>
     <li><a href="#"><span>操作系统</span></a></li>
    </ul>
    <div class="sideright"></div>
    <div>
     <div class="content">
       <a href="#" target="_blank">特效代码</a>
       <a href="#" target="_blank">特效代码</a>
       <a href="#" target="_blank">特效代码</a>
       <a href="#" target="_blank">特效代码</a>
       <a href="#" target="_blank">特效代码</a>
       <a href="#" target="_blank">特效代码</a>
       <a href="#" target="_blank">特效代码</a>
       <a href="#" target="_blank">特效代码</a>
       <a href="#" target="_blank">特效代码</a>
       <a href="#" target="_blank">特效代码</a>
     </div>
    </div>
   </div>
  </div>
 </div>
 <div class="clear"></div>
</body>
</html>

希望对大家学习javascript程序设计有所帮助。

javascript HTML+CSS实现经典橙色导航菜单

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 加上最后自己的验证

Nov 04 Javascript

ie6下png图片背景不透明的解决办法使用js实现

Jan 11 Javascript

基于JQuery实现的Select级联

Jan 27 Javascript

jQuery 取值、赋值的基本方法整理

Mar 31 Javascript

jQuery/CSS3图片特效插件整理推荐

Dec 07 Javascript

js使用递归解析xml

Dec 12 Javascript

JavaScript文本框脚本编写的注意事项

Jan 25 Javascript

使用pcs api往免费的百度网盘上传下载文件的方法

Mar 17 Javascript

jQuery实现的页面遮罩层功能示例【测试可用】

Oct 14 jQuery

浅谈JS对象添加getter与setter的5种方法

Jun 09 Javascript

微信小程序实现团购或秒杀批量倒计时

Nov 01 Javascript

Vue学习之组件用法实例详解

Jan 06 Javascript

JavaScript中使用数组方法汇总

Feb 16 #Javascript

jquery拖拽排序简单实现方法(效果增强版)

Feb 16 #Javascript

jquery实现具有收缩功能的垂直导航菜单

Feb 16 #Javascript

学习使用AngularJS文件上传控件

Feb 16 #Javascript

JS中call/apply、arguments、undefined/null方法详解

Feb 15 #Javascript

谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

Feb 15 #Javascript

仅30行代码实现Javascript中的MVC

Feb 15 #Javascript

You might like

漫荒推荐：画风超赞的国风漫画推荐超长假期不无聊

2020/03/08 国漫

一些PHP写的小东西

2006/12/06 PHP

swfupload 多文件上传实现代码

2008/08/27 PHP

php 流程控制switch的简单实例

2016/06/07 PHP

php redis实现文章发布系统（用户投票系统）

2017/03/04 PHP

php cli模式下获取参数的方法

2017/05/05 PHP

阿里云PHP SMS短信服务验证码发送方法

2017/07/11 PHP

php 中self,this的区别和操作方法实例分析

2019/11/04 PHP

javascript中兼容主流浏览器的动态生成iframe方法

2014/05/05 Javascript

利用jQuery实现WordPress中@的ID悬浮显示评论内容

2015/12/11 Javascript

JS组件系列之Bootstrap table表格组件神器【二、父子表和行列调序】

2016/05/10 Javascript

用jmSlip编写移动端顶部日历选择控件

2016/10/24 Javascript

JS中去掉array中重复元素的方法

2017/05/26 Javascript

详解关于element el-button使用$attrs的一个注意要点

2018/11/09 Javascript

详解vue2.6插槽更新v-slot用法总结

2019/03/09 Javascript

Electron整合React使用搭建开发环境的步骤详解

2020/06/07 Javascript

Python用GET方法上传文件

2015/03/10 Python

python实现多线程的两种方式

2016/05/22 Python

Python 闭包的使用方法

2017/09/07 Python

Python反射的用法实例分析

2018/02/11 Python

使用Python画出小人发射爱心的代码

2019/11/23 Python

基于Python爬取素材网站音频文件

2020/10/21 Python

使用CSS3创建动态菜单效果

2015/07/10 HTML / CSS

全天然狗零食：Best Bully Sticks

2016/09/22 全球购物

招商经理岗位职责

2013/11/16 职场文书

大学生职业生涯规划书范文

2014/01/14 职场文书

通信研究生自荐信

2014/02/01 职场文书

连锁酒店店长职责范本

2014/02/13 职场文书

大学生个人自荐信样本

2014/03/02 职场文书

爱与责任演讲稿

2014/05/20 职场文书

防邪知识进家庭活动方案

2014/08/26 职场文书

2014年学校团委工作总结

2014/12/20 职场文书

小学生安全保证书

2015/05/09 职场文书

丧事酒宴答谢词

2015/09/30 职场文书

Python正则表达式中flags参数的实例详解

2022/04/01 Python

GO语言异常处理分析 err接口及defer延迟

2022/04/14 Golang