首页
所有分类
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 指导方针
Apr 05 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
Perl Substr()函数及函数的应用
Dec 16 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
第三篇Bootstrap网格基础
Jun 21 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
Oct 27 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 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
纸巾盒(1) 美国购物网站(1542) 新加坡购物网站(41) SLi Minor 2020(63) 香港购物网站(84) 爱尔兰购物网站(30) 天梯图(1) 英国购物网站(954) AE3805(1) CPU(2)
You might like
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php inc文件使用的风险和注意事项
2013/11/12 PHP
PHP实现无限级分类（不使用递归）
2015/10/22 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
window.showModalDialog使用手册
2007/01/11 Javascript
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
2010/02/23 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
asp.net中System.Timers.Timer的使用方法
2013/03/20 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
javascript实现全角半角检测的方法
2015/07/23 Javascript
JS 组件系列之Bootstrap Table的冻结列功能彻底解决高度问题
2017/06/30 Javascript
JS轮播图实现简单代码
2021/02/19 Javascript
浅谈函数调用的不同方式,以及this的指向
2017/09/17 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Python的Django框架中URLconf相关的一些技巧整理
2015/07/18 Python
Python中防止sql注入的方法详解
2017/02/25 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
深入分析python 排序
2020/08/24 Python
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
大学生职业生涯规划书前言
2014/01/09 职场文书
消防器材管理制度
2014/01/28 职场文书
《理想的风筝》教学反思
2014/04/11 职场文书
大学生应聘求职信
2014/05/26 职场文书
护士长2014年终工作总结
2014/11/11 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
单位工资证明范本
2015/06/12 职场文书
企业法人任命书
2015/09/21 职场文书
Nginx域名转发使用场景代码实例
2021/03/31 Servers