首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 16, 2016

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

效果图：

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 相关文章推荐
JavaScript 拾漏补遗
Dec 27 Javascript
基于jquery的让页面控件不可用的实现代码
Apr 27 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
带左右箭头图片轮播的JS代码
Dec 18 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JQuery控制图片由中心点逐渐放大效果
Jun 26 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
Webpack按需加载打包chunk命名的方法
Sep 22 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
ICF-SW7600(1) RP2100(1) 乐信(1) 德劲1102(1) GF515(1) SHARP(1) PL450(1) 低放电路(1) PL550(1) SRF-M100(1)
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php实现文件下载实例分享
2014/06/02 PHP
PHP实现动态创建XML文档的方法
2018/03/30 PHP
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
固定表格行列(expression)在IE下适用
2013/07/25 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
jquery隔行换色效果实现方法
2015/01/15 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
ES6中Array.find()和findIndex()函数的用法详解
2017/09/16 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
socket在egg中的使用实例代码详解
2019/05/30 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
基于canvas实现手写签名（vue）
2020/05/21 Javascript
[05:08]第一届“网鱼杯”DOTA2比赛精彩集锦
2014/09/05 DOTA
Python自定义主从分布式架构实例分析
2016/09/19 Python
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python理解递归的方法总结
2019/01/28 Python
详解Python用户登录接口的方法
2019/04/17 Python
python实现数据分析与建模
2019/07/11 Python
多个python文件调用logging模块报错误
2020/02/12 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
可爱的童装和鞋子：Fabkids
2019/08/16 全球购物
.NET概念性的面试题
2012/02/29 面试题
迎八一活动主题
2014/01/31 职场文书
中华美德颂演讲稿
2014/05/20 职场文书
会计求职自荐信
2014/06/20 职场文书
艺术学院毕业生自荐信
2014/07/05 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
浅谈Python列表嵌套字典转化的问题
2021/04/07 Python
python3.7.2 tkinter entry框限定输入数字的操作
2021/05/22 Python
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技