首页
所有分类
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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
下拉列表select 由左边框移动到右边示例
Dec 04 Javascript
Uploadify上传文件方法
Mar 16 Javascript
JS实现的自定义显示加载等待图片插件(loading.gif)
Jun 17 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
angular ngClick阻止冒泡使用默认行为的方法
Nov 03 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
Nov 07 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
Aug 17 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题（显示变量）
Apr 20 Javascript
bootstrap-table后端分页功能完整实例
Jun 01 Javascript
VUE动态生成word的实现
Jul 26 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
netty(1) apt命令(1) Pickle(1) NoSQL(1) 解密(1) logging(1) Launch Mode(1) json_extract(1) 加密(1) 类加载器(1)
You might like
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
Laravel 5 框架入门（四）完结篇
2015/04/09 PHP
yii数据库的查询方法
2015/12/28 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
一些不错的js函数ajax
2008/08/20 Javascript
js 内存释放问题
2010/04/25 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
JavaScript实现自动消除按钮功能的方法
2015/08/05 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
详解jQuery中的DOM操作
2016/12/23 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
浅谈vue方法内的方法使用this的问题
2018/09/15 Javascript
JavaScript根据json生成html表格的示例代码
2018/10/24 Javascript
vue微信分享出来的链接点开是首页问题的解决方法
2018/11/28 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
layui字体图标 loading图标静止不旋转的解决方法
2019/09/23 Javascript
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
Python3通过Luhn算法快速验证信用卡卡号的方法
2015/05/14 Python
对Python协程之异步同步的区别详解
2019/02/19 Python
python实现图书借阅系统
2019/02/20 Python
Python如何调用外部系统命令
2019/08/07 Python
Python更换pip源方法过程解析
2020/05/19 Python
python实现最短路径的实例方法
2020/07/19 Python
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
数控技术应届生求职信
2013/11/13 职场文书
远程教育心得体会
2014/01/03 职场文书
校园活动宣传方案
2014/03/28 职场文书
项目投资意向书
2014/04/01 职场文书
“向国旗敬礼”主题班会活动设计方案
2014/09/27 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
努力学习保证书
2015/02/26 职场文书
React 高阶组件HOC用法归纳
2021/06/13 Javascript