`

仿豆瓣的风格改了个导航[js无框架版]

    博客分类：
  • js
框架FirefoxJ#JavaScriptXHTML 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta name="author" content="RainoXu" /> 
<title></title>
</head>
<body>
<style  type ="text/css">  
/*  <![CDATA[  */ 
body{
      padding:0;
      margin:0;
      text-align:center;
}
#nav{
      padding:0;
      margin:0 auto;
      width:900px;
      height:29px;
      list-style:none;
      position:relative;
}
#nav li{
      float:left;
      text-align:center;
      padding-left:4px;
      /*IE6中讨厌的bug，在IE7和FireFox中不设宽度能自动适应内部元素的宽度，IE6不行=.=!!*/
      +width:72px; 
}
#nav li.highlight{
      background:url("http://www.rainoina.com/raino/UserFiles/image/douban_nav/nav_bg_l.jpg") no-repeat left top;
}
#nav span a{
      text-decoration:none;
      font:14px tahoma;
      display:block;
      padding-right:9px;
      padding-left:5px;
      height:29px;
      line-height:29px;
}
#nav li.highlight a{ 
      background:url("http://www.rainoina.com/raino/UserFiles/image/douban_nav/nav_bg_r.jpg") no-repeat right top;
}
.subNav{
      padding:0;
      list-style:none;
      width:900px;
      height:30px;
      background:#EEF9EB;
      border-top:#DCF5D5;
      display:none;
      position:absolute;
      left:0;
      +left:-40px;
}
.highlight .subNav{
      display:block;
}
.subNav li{
      height:30px;
      line-height:30px;
}
.subNav a{
      text-decoration:none;
      font:12px tahoma;
}
/*  ]]>  */ 
</style> 
<ul id="nav">
      <li>
            <span><a href="###">菜单一</a></span>
            <ul class="subNav">
                  <li><a href="###">1子菜单一</a></li>
                  <li><a href="###">子菜单二</a></li>
                  <li><a href="###">子菜单三</a></li>
                  <li><a href="###">子菜单四</a></li>
            </ul>
      </li>
      <li>
            <span><a href="###">菜单二</a></span>
            <ul class="subNav">
                  <li><a href="###">2子菜单一</a></li>
                  <li><a href="###">子菜单二</a></li>
                  <li><a href="###">子菜单三</a></li>
                  <li><a href="###">子菜单四</a></li>
            </ul> 
      </li>
      <li>
            <span><a href="###">菜单三</a></span>
            <ul class="subNav">
                  <li><a href="###">3子菜单一</a></li>
                  <li><a href="###">子菜单二</a></li>
                  <li><a href="###">子菜单三</a></li>
                  <li><a href="###">子菜单四</a></li>
            </ul>
      </li>
      <li>
            <span><a href="###">菜单四</a></span>
            <ul class="subNav">
                  <li><a href="###">4子菜单一</a></li>
                  <li><a href="###">子菜单二</a></li>
                  <li><a href="###">子菜单三</a></li>
                  <li><a href="###">子菜单四</a></li>
            </ul> 
      </li>
</ul>
<script type="text/javascript">
//<![CDATA[
//定义一个控制NAV的类
function navSwap(navId){
      this.obj=document.getElementById(navId);
      this.subElement=[];
      //把#navId的LI子节点（仅仅是子节点，不包括孙子节点）推入栈中
      for (var i=0;i<this.obj.childNodes.length;i++){
            if (this.obj.childNodes[i].nodeType==1){
                  this.subElement.push(this.obj.childNodes[i]);
            }
      }      
      
      if (this.subElement.length>0){
            //首先将第一个标签选项高亮
            this.subElement[0].className="highlight";
            for (var i=0;i<this.subElement.length;i++){
                  //得到各个<span/>中的<a/>节点
                  var tagNode=this.subElement[i].getElementsByTagName("span")[0].getElementsByTagName("a")[0];
                  
                  //绑定事件
                  tagNode.onmouseover=function(){
                        //得到#navId下的所有li，这里得到的也有来自subNav下的li，但这不影响后面的操作
                        var allSubTag=document.getElementById(navId).getElementsByTagName("li");
                        //找到class="highlight"的li，取消它的高亮，一旦找到就跳出循环
                        for (var j=0;j<allSubTag.length ;j++){
                              if (allSubTag[j].className=="highlight"){
                                    allSubTag[j].className="";
                                    break;
                              }
                        }
                        //这里的this指向的是onmouseover时触发者<span/>中的<a/>标签，而不是类的内部成员。
                        this.parentNode.parentNode.className="highlight";
                  }
            }
      }      
}
//生成一个控制的对象
new navSwap("nav");
//]]>
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<meta name="author" content="RainoXu" /> 
<title></title>
</head>
<body>
<style  type ="text/css">  
/*  <![CDATA[  */ 
body{
      padding:0;
      margin:0;
      text-align:center;
}
#nav{
      padding:0;
      margin:0 auto;
      width:900px;
      height:29px;
      list-style:none;
      position:relative;
}
#nav li{
      float:left;
      text-align:center;
      padding-left:4px;
      /*IE6中讨厌的bug，在IE7和FireFox中不设宽度能自动适应内部元素的宽度，IE6不行=.=!!*/
      +width:72px; 
}
#nav li.highlight{
      background:url("http://www.rainoina.com/raino/UserFiles/image/douban_nav/nav_bg_l.jpg") no-repeat left top;
}
#nav span a{
      text-decoration:none;
      font:14px tahoma;
      display:block;
      padding-right:9px;
      padding-left:5px;
      height:29px;
      line-height:29px;
}
#nav li.highlight a{ 
      background:url("http://www.rainoina.com/raino/UserFiles/image/douban_nav/nav_bg_r.jpg") no-repeat right top;
}
.subNav{
      padding:0;
      list-style:none;
      width:900px;
      height:30px;
      background:#EEF9EB;
      border-top:#DCF5D5;
      display:none;
      position:absolute;
      left:0;
      +left:-40px;
}
.highlight .subNav{
      display:block;
}
.subNav li{
      height:30px;
      line-height:30px;
}
.subNav a{
      text-decoration:none;
      font:12px tahoma;
}
/*  ]]>  */ 
</style> 
<ul id="nav">
      <li>
            <span><a href="###">菜单一</a></span>
            <ul class="subNav">
                  <li><a href="###">1子菜单一</a></li>
                  <li><a href="###">子菜单二</a></li>
                  <li><a href="###">子菜单三</a></li>
                  <li><a href="###">子菜单四</a></li>
            </ul>
      </li>
      <li>
            <span><a href="###">菜单二</a></span>
            <ul class="subNav">
                  <li><a href="###">2子菜单一</a></li>
                  <li><a href="###">子菜单二</a></li>
                  <li><a href="###">子菜单三</a></li>
                  <li><a href="###">子菜单四</a></li>
            </ul> 
      </li>
      <li>
            <span><a href="###">菜单三</a></span>
            <ul class="subNav">
                  <li><a href="###">3子菜单一</a></li>
                  <li><a href="###">子菜单二</a></li>
                  <li><a href="###">子菜单三</a></li>
                  <li><a href="###">子菜单四</a></li>
            </ul>
      </li>
      <li>
            <span><a href="###">菜单四</a></span>
            <ul class="subNav">
                  <li><a href="###">4子菜单一</a></li>
                  <li><a href="###">子菜单二</a></li>
                  <li><a href="###">子菜单三</a></li>
                  <li><a href="###">子菜单四</a></li>
            </ul> 
      </li>
</ul>
<script type="text/javascript">
//<![CDATA[
//定义一个控制NAV的类
function navSwap(navId){
      this.obj=document.getElementById(navId);
      this.subElement=[];
      //把#navId的LI子节点（仅仅是子节点，不包括孙子节点）推入栈中
      for (var i=0;i<this.obj.childNodes.length;i++){
            if (this.obj.childNodes[i].nodeType==1){
                  this.subElement.push(this.obj.childNodes[i]);
            }
      }      
      
      if (this.subElement.length>0){
            //首先将第一个标签选项高亮
            this.subElement[0].className="highlight";
            for (var i=0;i<this.subElement.length;i++){
                  //得到各个<span/>中的<a/>节点
                  var tagNode=this.subElement[i].getElementsByTagName("span")[0].getElementsByTagName("a")[0];
                  
                  //绑定事件
                  tagNode.onmouseover=function(){
                        //得到#navId下的所有li，这里得到的也有来自subNav下的li，但这不影响后面的操作
                        var allSubTag=document.getElementById(navId).getElementsByTagName("li");
                        //找到class="highlight"的li，取消它的高亮，一旦找到就跳出循环
                        for (var j=0;j<allSubTag.length ;j++){
                              if (allSubTag[j].className=="highlight"){
                                    allSubTag[j].className="";
                                    break;
                              }
                        }
                        //这里的this指向的是onmouseover时触发者<span/>中的<a/>标签，而不是类的内部成员。
                        this.parentNode.parentNode.className="highlight";
                  }
            }
      }      
}
//生成一个控制的对象
new navSwap("nav");
//]]>
</script>
</body>
</html>

 

分享到：
| 幻灯程序更新v2.0
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    微信小程序仿豆瓣电影源码

    微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小程序仿豆瓣电影源码微信小...

    vue框架仿豆瓣模板

    在"vue框架仿豆瓣模板"项目中，我们将会深入探讨如何利用Vue.js来构建一个类似豆瓣的Web应用程序界面。 首先，Vue.js的核心概念包括组件化、虚拟DOM和数据绑定。组件是Vue应用的基本构建块，可以复用并包含独立的...

    PHP仿豆瓣小组.zip

    PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿豆瓣小组 PHP仿...

    精仿豆瓣网整站源码

    【标题】"精仿豆瓣网整站源码"所涉及的知识点主要集中在网站开发和源码构建方面。豆瓣网是一个综合性的在线社区平台，包含了图书、电影、音乐等多种媒体的信息分享和用户评论功能，以及小组、活动等社交元素。因此，...

    仿豆瓣网首页页面代码

    【标题】：“仿豆瓣网首页页面代码”项目解析 在网页设计和开发中，仿制一个知名网站的界面是提升技能和理解网页布局的好方法。在这个项目中，我们关注的是“仿豆瓣网首页”的前端代码实现，它主要涉及HTML和CSS...

    顶部导航栏可滑动可点击，仿微信仿豆瓣

    5. **豆瓣和微信风格**：这个项目的目标是模仿豆瓣和微信的顶部导航栏设计，因此可能包括了特定的视觉效果和动画，如按钮的高亮效果、滑动过渡动画等，以增强用户体验。 6. **资源文件**：Douban-master这个压缩包...

    一个标准的仿豆瓣系统下载

    总的来说，这个仿豆瓣系统为学习和实践Web应用开发提供了很好的素材。开发者可以借此机会深入了解Web服务的架构设计，学习如何处理用户交互、数据存储和检索，以及如何构建社交网络的核心功能。同时，也可以借此机会...

    豆瓣官网_前端仿豆瓣官网_

    【标题】：“豆瓣官网_前端仿豆瓣官网_”是一个项目，旨在通过HTML、CSS和JavaScript技术来模拟实现豆瓣官网的首页。这个项目对于初学者来说是一个很好的实践平台，可以帮助他们熟悉前端开发的基本流程和技巧。 ...

    仿豆瓣网的源码，很不错！

    1. **Web开发框架**：由于是模仿豆瓣网的源码，很可能使用了常见的Web开发框架，如Python的Django或Flask，或者JavaScript的React、Vue.js等。了解这些框架的基础知识对于理解和修改源码至关重要。 2. **数据库设计...

    仿豆瓣网主页

    【标题】"仿豆瓣网主页" 是一个项目，旨在通过HTML5、JavaScript和CSS技术来重现豆瓣网的主页布局和功能。这个项目可以帮助初学者理解网页开发的基本原理，特别是对于那些对豆瓣网的界面设计感兴趣并希望学习如何...

    用vue20实现仿豆瓣app将用到vuerouterwebpackaxiosvuex

    Vue.js 是一个轻量级的渐进式JavaScript框架，它允许开发者逐步地在现有项目中引入其功能。Vue 2.0 版本提供了虚拟DOM、响应式数据绑定、组件化、生命周期管理等一系列特性，使得构建用户界面变得更加简单和高效。 ...

    一个仿豆瓣的网站

    标题 "一个仿豆瓣的网站" 描述了一个项目，它的目标是构建一个类似于豆瓣（Douban）的在线平台。豆瓣是中国知名的社交媒体网站，以其电影、书籍和音乐的评分、评论和推荐系统闻名。这个仿造版可能包含了类似的特性和...

    php版仿豆瓣源码

    【php版仿豆瓣源码】是一个基于PHP编程语言开发的项目，旨在实现类似豆瓣网站的功能。这个源代码提供了丰富的功能模块，包括但不限于主页展示、用户注册、个人主页等，为开发者提供了一个很好的学习和实践平台，了解...

    微信小程序仿豆瓣电影源码.zip

    微信小程序仿豆瓣电影源码.zip 可直接运行

    仿豆瓣一刻APP

    【标题】"仿豆瓣一刻APP"揭示了这个项目的目标是模仿知名的豆瓣一刻应用程序，这是一个集阅读、分享和发现有趣内容的平台。这个项目基于Android Studio，这是Google推出的Android应用开发集成开发环境（IDE），提供...

    高仿豆瓣图书小程序源码.zip

    2. JavaScript：小程序通常基于JavaScript进行开发，尤其是微信小程序框架WXML和WXSS。 3. 数据库：用于存储图书信息，可能使用了如SQLite这样的轻量级数据库。 4. API接口：可能调用了豆瓣API获取图书数据。 5. UI...

    仿豆瓣源程序PHP5

    整体而言，"仿豆瓣源程序PHP5"为开发者提供了一个基础框架，以便快速搭建类似豆瓣网的在线平台。开发者需要具备一定的PHP5编程和Web开发经验，以便对程序进行定制化，满足特定需求。同时，对于安全性、性能优化、...

    仿豆瓣 小程序 炫酷

    综上所述，这个仿豆瓣的小程序项目涵盖了数据获取（如豆瓣评分）、用户界面设计（如最新和待上映资源的展示）、以及内容呈现（如人物模块）。同时，它还作为一个教学工具，为小程序开发者提供了实战经验。在实际开发...

    仿豆瓣社区圈子

    "仿豆瓣社区圈子"是这样一个项目，它借鉴了豆瓣社区的设计理念，旨在创建一个集信息分享、兴趣交流和互动讨论于一体的在线社区。这个项目的核心在于实现Web2.0的功能特性，让用户能够积极参与内容的创造和分享，同时...

    MUI 仿豆瓣电影 APP跨平台混编框架

    【MUI 仿豆瓣电影 APP跨平台混编框架】 MUI 是DCloud（即之前的HTML5 Plus）推出的一款轻量级的前端框架，专门用于构建高性能的移动应用。它的核心理念是通过HTML5、CSS3和JavaScript技术，结合部分原生功能，实现...

Magicbox
Global site tag (gtag.js) - Google Analytics