首页
所有分类
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 获取所有id中包含某关键字的控件的实现代码
Nov 25 Javascript
JQuery datepicker 使用方法
May 20 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
javascript 实现动态侧边栏实例详解
Nov 11 Javascript
如何让你的JS代码更好看易读
Dec 01 Javascript
Vue循环组件加validate多表单验证的实例
Sep 18 Javascript
Node.js动手撸一个静态资源服务器的方法
Mar 09 Javascript
详解Vue 全局变量，局部变量
Apr 17 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
Vue 解决多级动态面包屑导航的问题
Nov 04 Javascript
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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
Post(1) 条码(1) 太阳码(1) Get(1) 延时任务(1) openGauss(1) 二维码(2) Word(2) JDBC(3) 日志(1)
You might like
discuz安全提问算法
2007/06/06 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
2013/06/05 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
基于javascript实现图片滑动效果
2016/05/07 Javascript
JavaScript实现url参数转成json形式
2016/09/25 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
JavaScript结合HTML DOM实现联动菜单
2017/04/05 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
详解vue+css3做交互特效的方法
2017/11/20 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
Python的subprocess模块总结
2014/11/07 Python
Python中文件操作简明介绍
2015/04/13 Python
轻松掌握python设计模式之策略模式
2016/11/18 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
为什么是 Python -m
2020/06/19 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
旧时光糖果：Old Time Candy
2018/02/05 全球购物
经济实惠的豪华家具：My-Furniture
2019/03/12 全球购物
电影T恤、80年代T恤和80年代服装：TV Store Online
2020/01/05 全球购物
社区重阳节活动总结
2015/03/24 职场文书
学校通报表扬范文
2015/05/04 职场文书
企业宣传稿范文
2015/07/23 职场文书
初三化学教学反思
2016/02/22 职场文书
《家》读后感：万惜拯救，冷暖自知
2019/09/25 职场文书
Redis做数据持久化的解决方案及底层原理
2021/07/15 Redis
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
Java设计模式之代理模式
2022/04/22 Java/Android
MySQL中dd::columns表结构转table过程及应用详解
2022/09/23 MySQL