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

最新推荐文章于 2022-07-03 21:04:41 发布
最新推荐文章于 2022-07-03 21:04:41 发布
阅读量111 收藏
点赞数
分类专栏： js 文章标签： 框架 Firefox J# JavaScript XHTML ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/goby2008/article/details/83319639
版权 
<!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.οnmοuseοver=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.οnmοuseοver=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>

 

goby2008
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
豆瓣首页模仿练习(静态页面，只用了html+css)
m0_61944129的博客
10-16 2242
首先进行html书写，再写css。 先展示成果比较： 原网页： 模仿成果（截图时间不太一样，原网页更新后和当时模仿的样式有一点内容上的不同）： html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta...
仿豆瓣分页原型(Javascript版)
10-30
本篇文章将详细探讨一种模仿豆瓣网站分页风格的设计方案——仿豆瓣分页原型(Javascript版)，并对其进行深入分析。 #### 二、设计背景及目的 随着互联网的发展，用户对于网站交互性的要求越来越高。豆瓣作为一个...
模仿豆瓣music的一个html5模板
05-19
模仿豆瓣的html模板，支持音乐在线播放，可以自由适配各种开源格式
仿豆瓣首页弹性滑动控件
Axl的技术博客
07-06 757
逛豆瓣的时候看到了这样的控件，觉得挺有趣，遂模仿之先看看原版的效果再看看模仿的效果分析控件结构分析由于*ScrollView只能有一个child view，所以整个child view的结构如图，这里我选择的是LinearLayout作为最外层的布局，content为展示的可滑动的内容，“更多”滑到最右边继续滑时出现的部分，先通过margin把“更多”隐藏还有“更多”出现时的波纹效果，这个效果是通过
精仿豆瓣网整站源码
10-08
精仿豆瓣网整站源码精仿豆瓣网整站源码精仿豆瓣网整站源码
仿豆瓣网首页
xingping1982的博客
03-24 1071
下载地址：关注wx公众号feixueteam
vue框架仿豆瓣模板
08-28
在"vue框架仿豆瓣模板"项目中，我们将会深入探讨如何利用Vue.js来构建一个类似豆瓣的Web应用程序界面。 首先，Vue.js的核心概念包括组件化、虚拟DOM和数据绑定。组件是Vue应用的基本构建块，可以复用并包含独立的...
douban:一个基于vue的简单仿豆瓣项目
05-02
仿豆瓣APPA Vue.js project第一次接触vue全家桶系列，使用豆瓣API来当作我的第一个vue单页项目应用。跨域代理因为自己还没有购买服务器，所以先使用了webpack提供的代理在本地进行跨域请求，完成跨域请求，完成跨域...
Android实现顶部导航栏可点击可滑动效果(仿微信仿豆瓣网)
01-20
在Android应用开发中，创建一个类似微信或豆瓣那样的顶部导航栏，可以实现点击切换和滑动浏览的效果，需要用到几个关键的组件和库。本篇文章将详细介绍如何使用ViewPager、PagerSlidingTabStrip和SwipeRefreshLayout...
仿豆瓣网主页
05-22
豆瓣HTMl5，JavaScript，css。豆瓣网主页源码，用html+css
仿豆瓣网的源码，很不错！
12-16
高仿豆瓣评书源码，本人已经测试过可以用哦！
仿豆瓣电影APP
12-26
通过hbuilder实现了app获取实时数据，只完成了榜单和热映的部分和top250的显示
豆瓣官网_前端仿豆瓣官网_
09-29
【标题】：“豆瓣官网_前端仿豆瓣官网_”是一个项目，旨在通过HTML、CSS和JavaScript技术来模拟实现豆瓣官网的首页。这个项目对于初学者来说是一个很好的实践平台，可以帮助他们熟悉前端开发的基本流程和技巧。 ...
HTML期末作业----读书网（模仿豆瓣读书）
coding加油站
07-03 2135
HTML5期末大作业，期末作业，js，html，css的使用，豆瓣读书，模仿豆瓣读书，读书网页
Vue2.0开发仿豆瓣电影WebApp
大灰狼的小绵羊哥哥的博客
08-01 2260
想自己动手搭建一个 WordPress 独立博客？试试腾讯云上实验室吧 https://cloud.tencent.com/developer/labs 原文链接：https://segmentfault.com/a/1190000010309751 更接近豆瓣原版的webapp，本项目在论坛上也看到其他人做过，但有的功能不完善有的实现效果的体验感并不好，所以自己照着理想的效果做了
仿豆瓣网首页（HTML+CSS)
weixin_42569562的博客
11-04 4638
一、放豆瓣网首页 1.1 douban.html &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml...
30套JSP网站源代码合集
weixin_30325971的博客
04-05 2750
JSP技术是以Java语言作为脚本语言的，JSP网页为整个服务器端的Java库单元提供了一个接口来服务于HTTP的应用程序。我收集了一些JSP开发的网站源代码，从实践中学习，希望对大家有用。 资料名称 下载地址 网上购物系统（jsp+mysql+tomcat） http://down.51cto.com/data/54179 jsp网上购物系统源代码 ...
仿豆瓣网（电脑版网页）HTML+CSS实现
demonHunter1234的博客
11-17 2878
步骤一：将豆瓣电脑版网页以图片形式保存下来： 利用了chrome里面的插件： 步骤二：将图片放置到PS中，研究布局： 我将其分为header部分，banner部分，section部分，footer部分；其中相应的比如header部分又要分为header_up部分和header_down部分，header_down部分又得左右划分为左，中，右部分等。 步骤三：确定页...
怎么配置仿豆瓣电影评分网导航的vue-router
最新发布
01-07
要配置一个仿豆瓣电影评分网导航的vue-router，您需要遵循以下步骤： 1. 首先，您需要在项目中安装并引入vue-router。在终端中进入项目根目录，并运行以下命令： ```bash npm install vue-router ``` 2. 在src...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值