二级水平导航菜单

最新推荐文章于 2024-08-16 10:23:23 发布
最新推荐文章于 2024-08-16 10:23:23 发布
阅读量926 收藏
点赞数
分类专栏： Web 文章标签： xhtml javascript ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanguz/article/details/84475918
版权

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

 

<title>TT</title>

<style>

body {

        text-align: center;

        background: #FFF;

        font: 12px Tahoma, sans-serif;

        color: #000;

}

img {

        border: 0;

}

ul,li {

        list-style:none;

}

* {

        margin: 0;

        padding: 0;

}

.clear {

        clear: both;

        margin: 0 auto;

        display: block;

        font: 0/0 sans-serif;

        height: 3px;

}

.head {

        margin: 0 auto;

        width: 100%;

}

.header_zzjs {

        width: 100%;

        float: right;

        padding: 20px 0 0 0;

background-color:blue;

}

.headt {

        padding-top: 20px;

        font-size: 14px;

}

.head li {

        display: inline;

}

.head li a {

        background: #E9F2FF;

        border: 1px solid #CCC;

        padding: 12px 60px;

}

.head li a:hover {

        background: #B3D3FF;

        text-decoration: none;

        color: #D30102;

}

</style>

</head>

<body>

<script type="text/javascript">

function fetch_object(idname)

{

 var my_obj = document.getElementById(idname);

 return my_obj;

}

function toggle_nav(obj)

{

 for (i = 1; i<= 3; i++ )

 {

  var sub_nav = fetch_object("zzjs_nav" + i);

  var sub_nav_index = fetch_object("zzjs_nav0");

  sub_nav_index.style.display = "none";

  if (obj == i)

  {

   sub_nav.style.display = "block";

  }

  else

  {

   sub_nav.style.display = "none";

  }

 }

}

</script>

 

<div class="head">

        <div class="header_zzjs">

                <ul>

                <li οnmοuseοver="javascript:toggle_nav(1)"><a href="#">站长一号</a></li>

                <li οnmοuseοver="javascript:toggle_nav(2)"><a href="#">站长二号</a></li>

                <li οnmοuseοver="javascript:toggle_nav(3)"><a href="#">站长三号</a></li>

   

                

                </ul>

                <div class="clear"></div>

                <div id="zzjs_nav0" class="headt" style="display:block"></div>

                <div id="zzjs_nav1" class="headt" style="display:none">

                <a href="#">站长特效首页</a> | <a href="#">首页一号</a> | <a href="#">首页二号</a> | <a href="#">首页三号</a>

                </div>

                <div id="zzjs_nav2" class="headt" style="display:none">

                <a href="#">站长特效一号</a> | <a href="#">一号菜单栏目1</a> | <a href="#">一号菜单栏目2</a> | <a href="#">一号菜单栏目3</a>

                </div>

                <div id="zzjs_nav3" class="headt" style="display:none">

                <a href="#">站长特效二号</a> | <a href="#">二号菜单栏目1</a> | <a href="#">二号菜单栏目2</a>

                </div>

                <div id="zzjs_nav4" class="headt" style="display:none">

                <a href="#">站长特效三号</a> | <a href="#">三号菜单栏目1</a>

                </div>

                

                </div>

        </div>

</div>

<div class="clear"></div>

</body>

</html>

yanguz
关注
专栏目录
js实现二级导航功能
10-20
本文将详细解析如何使用JS实现一个简单的二级导航菜单。 首先，二级导航通常涉及到一级菜单项和对应的二级子菜单项。在HTML结构中，我们可以看到每个一级菜单`<li>`内包含一个链接`<a>`和一个二级内容`...
JavaScript 九九乘法表?
wxt_wjc的博客
01-11 762
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
HTML如何实现多级水平导航栏,jQuery+css实现的蓝色水平二级导航菜单效果代码
weixin_29529733的博客
06-09 1722
本文实例讲述了jQuery+css实现的蓝色水平二级导航菜单效果。分享给大家供大家参考。具体如下：这是一款蓝色经典的jQuery+CSS实现水平二级导航菜单，相信你会喜欢的，蓝色，超级经典的一种风格，从其它网站上扣下来的，我认为很不错，赶紧分享给大家吧。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-tr...
WPF篇（20）- Menu菜单+ContextMenu上下文菜单+StatusBar状态栏
最新发布
一个人的江湖
08-16 1963
到此WPF的常用的集合控件就给大家分享完了，我认为还是非常全面的，每一个控件的详细使用都给大家做了演示和代码分享，希望能够帮助到大家，接下来会继续给大家分享WPF的数据绑定，这个是WPF的灵魂，没有数据的绑定，页面也就没有了意义，就是一个空壳子，希望大家持续关注。这个MenuItem和前面的TreeViewItem类似，拥有共同的HeaderedItemsControl父类，也就是说，MenuItem本身也是一个集合控件，若要以代码形式加载Menu的内容，也必须要掌握递归的加载思路。
你能看得懂的二级水平导航菜单教程~v~
justdoit936的博客
10-24 4711
你能看得懂的二级水平导航菜单教程~v~1.先布局HTML2.CSS样式实现3.全部代码4.小结 1.先布局HTML html代码如下： <ul> <li><a href="">首页</a></li> <li><a href="">课程</a> <ul> <li><a href="">语文</a></li> <li&g
css实现二级菜单
first_hands的博客
03-03 2540
由上面的实例可以看出，使用css的display属性控制二级下拉菜单的显示与否。当鼠标移动到一级菜单的li标签时，显示二级菜单的ul标签。display:block - 把链接显示为块元素可使整个链接区域可点击（不仅仅是文本），同时也允许我们规定宽度。先隐藏二级的菜单，当鼠标移动到一级菜单的li标签时，在显示二级菜单的ul标签。list-style-type:none - 删除圆点。float：left-向左浮动，保证一级菜单水平显示。display:none-隐藏二级的菜单。
使用html写一个水平二级菜单
qq_40072583的博客
07-09 2092
（1） 写标题我们一般用到<nav>这个标签，<nav>这个标签就是定义导航链接部分的一个标签。 （2）还有会用到<ul><li>标签来实现导航菜单功能。 （3）在这里呢，我用的是<nav>标签，<ul><li>标签和<a>标签来实现的一个水平的二级菜单，废话不多说，看代码！！！ <!DOCTYP...
js二级导航菜单
10-09
"js二级导航菜单"就是一种常见的交互元素，特别是在内容丰富的网站中，它能有效地组织和展示多个级别的链接。本文将深入探讨如何使用JavaScript来实现一个功能完备、交互友好的二级导航菜单。 首先，我们需要理解...
蓝色水平二级导航菜单
05-01
蓝色水平二级导航菜单，DIV+CSS布局，应用到jQuery技术，蓝色风格，清爽大气。 该网页菜单包含文件：html,css,js,gif图片
支持二级、下拉菜单导航
06-05
在网页设计中，导航菜单是用户体验的关键组成部分，它帮助用户快速找到他们想要的信息或功能。本文将深入探讨“支持二级、下拉菜单导航”的概念、实现方式以及其在实际应用中的重要性。 首先，二级菜单是指在一级...
纯CSS+XHTML实现的二级导航菜单效果
09-24
标题中的“纯CSS+XHTML实现的二级导航菜单效果”是指使用CSS（层叠样式表）和XHTML（可扩展超文本标记语言）这两种技术来创建一个具有二级结构的导航菜单。这种菜单在用户交互时，如鼠标悬停，会显示或隐藏下一级的...
很好看的二级横向导航菜单
05-15
很好的二级横向导航菜单，你开发过程中导航菜单的首选
水平导航菜单+二级菜单效果
10-25
水平导航菜单，当鼠标移动上去，会显示每个菜单下的二级菜单效果。 采用Html+JavaScript
CSS3水平二级导航菜单.zip
05-27
CSS3水平二级导航菜单，纯CSS3制作，红色风格，鼠标经过显示二级菜单。
二级导航栏不显示
06-18
二级导航栏不显示 的问题
超经典支持二级分类的网站水平导航菜单
05-12
内容索引:脚本资源,CSS特效,菜单　　超级经典的支持二级分类的网站横向导航菜单，CSS+JavaScript联手打造，很多网站都在用。 　　因为用到了不少的图片资源，因此这里将其一并打包供下载。功能演示可以看上边的截图，这种菜单的操作体验很不错，大部分人都喜欢。二级菜单同样也精彩，鼠标移向菜单时候的背景类似按钮一样，感觉特棒。
HTML中水平二级菜单和垂直二级菜单的设计
你们瞎搞
03-22 4718
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>二级菜单</title> <style> * { margin: 0; padding: 0; } div{ /*知道了盒子宽度垂直居中*/ ...
web端导航菜单系列
weixin_43516258的博客
04-26 6916
web内容或层次较多时，常用该导航样式（若导航层级三级或者多于三级可考虑双导航栏布局）；导航菜单属于导航中最常规的一种导航模式，它有2个显而易见的用途：帮助我们找到想要的任何东西和告诉我们现在身在何处。结合自身对于导航设计的理解，并综合当下导航设计，对web端导航设计作如下阐述，顶部导航+左侧导航；顶部导航为一级导航，左侧导航为二级导航；一级导航较少，二级导航多的场景更契合。滚动页面，内容对应到相应的导航，或者点击导航，页面内容滚动到相应的模块。点击对应导航或滚动页面，页面滚动至导航对应模块。
jQuery垂直导航栏-二级
dearlwy521的博客
05-21 612
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src=.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值