js实现横向导航栏

最新推荐文章于 2024-05-06 00:47:49 发布
最新推荐文章于 2024-05-06 00:47:49 发布
阅读量2.8k 收藏 2
点赞数
分类专栏： html/css/js 文章标签： function xhtml html border float c

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

    <title>JavaScript下拉菜单</title>

    <style type="text/css">

        * {

            padding:0;

            margin:0;

        }

        body {

            font-family:verdana, sans-serif;

            font-size:small;

        }

        #navigation, #navigation li ul {

            list-style-type:none;

        }

        #navigation {

            margin:20px;

        }

        #navigation li {

            float:left;

            text-align:center;

            position:relative;

        }

        #navigation li a:link, #navigation li a:visited {

            display:block;

            text-decoration:none;

            color:#000;

            width:120px;

            height:40px;

            line-height:40px;

            border:1px solid #fff;

            border-width:1px 1px 0 0;

            background:#c5dbf2;

            padding-left:10px;

        }

        #navigation li a:hover {

            color:#fff;

            background:#2687eb;

        }

        #navigation li ul li a:hover {

            color:#fff;

            background:#6b839c;

        }

        #navigation li ul {

            display:none;

            position:absolute;

            top:40px;

            left:0;

            margin-top:1px;

            width:120px;

        }

        #navigation li ul li ul {

            display:none;

            position:absolute;

            top:0px;

            left:130px;

            margin-top:0;

            margin-left:1px;

            width:120px;

        }

    </style>

    <script type="text/javascript">

        function displaySubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "block";

        }

        function hideSubMenu(li) {

            var subMenu = li.getElementsByTagName("ul")[0];

            subMenu.style.display = "none";

        }

    </script>

</head>

<body>

    <ul id="navigation">

        <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">

            <a href="#">栏目1</a>   

            <ul>

                <li><a href="#">栏目1->菜单1</a></li>

                <li><a href="#">栏目1->菜单2</a></li>

                <li><a href="#">栏目1->菜单3</a></li>

                <li><a href="#">栏目1->菜单4</a></li>

            </ul>

        </li>

        <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">

            <a href="#">栏目2</a>   

            <ul>

                <li><a href="#">栏目2->菜单1</a></li>

                <li><a href="#">栏目2->菜单2</a></li>

                <li><a href="#">栏目2->菜单3</a></li>

                <li><a href="#">栏目2->菜单4</a></li>

                <li><a href="#">栏目2->菜单5</a></li>

            </ul>

        </li>

        <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">

            <a href="#">栏目3</a>   

            <ul>

                <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">

                    <a href="#">栏目3->菜单1</a>

                    <ul>

                        <li><a href="#">菜单1->子菜单1</a></li>

                        <li><a href="#">菜单1->子菜单2</a></li>

                        <li><a href="#">菜单1->子菜单3</a></li>

                        <li><a href="#">菜单1->子菜单4</a></li>

                    </ul>

                </li>

                <li><a href="#">栏目3->菜单2</a></li>

                <li οnmοuseοver="displaySubMenu(this)" οnmοuseοut="hideSubMenu(this)">

                    <a href="#">栏目3->菜单3</a>

                    <ul>

                        <li><a href="#">菜单3->子菜单1</a></li>

                        <li><a href="#">菜单3->子菜单2</a></li>

                        <li><a href="#">菜单3->子菜单3</a></li>

                    </ul>

                </li>

            </ul>

        </li>

    </ul>

<div style="width:100%; background:#f00; height:100px;">asfsadga</div>

</body>

</html>

原文地址：http://blog.163.com/suixiangsuiyuan-00/blog/static/109974477200910242239110/

bwkTC
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现横向弹出二级菜单
06-05
二级横向导航栏菜单效果，鼠标移动到文字上，二级导航横向展开，移走后自动消失
js横向导航栏
05-06
js实现的横向导航栏菜单 支持无限子栏目
HTML横向导航菜单
10-10
使用HTML实现的横向导航菜单，仅供参考
导航栏的HTML的布局方式
m0_58560220的博客
08-15 4169
利用浮动，弹性盒子完成导航栏布局
JS制作横向菜单
qq_62881798的博客
03-07 703
<!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=g.
html js实现横向菜单,JavaScript实现横版菜单栏
weixin_39653361的博客
06-17 688
本文实例为大家分享了JavaScript实现横版菜单栏的具体代码，供大家参考，具体内容如下示例代码：横版菜单栏.active{background-color: aqua;}.hide{display: none;}.menu{background-color: #667dbd;width: 300px;height: 30px;}.menu-item{border: #bd342d solid ...
html js实现横向菜单,js实现水平滚动菜单导航
weixin_29290259的博客
06-16 1008
项目中用到了滚动导航，但是默认的滚动条太丑了，只好用js自己模拟了一个。凑合用可以，不算完美。希望以后有机会再来修饰一下。先来看下最终效果：最终效果先看html结构:全单1全部菜2单全部3单菜单4全菜单全部5菜单全6单全6部菜单全菜7单全8单全部5菜单全6单全6部菜单全菜7单全8单全9部菜单全10单全11部单菜2单全菜12单全32部菜单说一下，末尾我给加了阴影的效果：.root:before{di...
分享77个JS菜单导航，总有一款适合您
zy0412326的专栏
02-11 782
js
JavaScript写横向二级导航
weixin_46430385的博客
04-04 424
HTML： 首先引入公共样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="public.css"> &...
html js 左侧二级菜单,横向二级导航菜单(html+css+js)
weixin_42522552的博客
05-31 1238
/*基本信息*/body{margin: 0;padding: 0;background: #FFFFFF;}/*导航*/#navigation{font: 12px bolder "Lucida Grande" ,​Helvetica,​Arial,​Verdana,​sans-serif; /* 设置文字大小和字体样式 */height: 32px;background: #999999;}....
原生js和jquery分别实现横向导航菜单效果
11-22
本文实例为大家分享了原生js和jquery横向导航菜单的制作方法，供大家参考，具体内容如下 原生javascript实现： 这一次要实现的是鼠标放上去以后，菜单栏被选中的那一栏水平拉伸，鼠标离开后水平收缩。并带有一定的时间性，使肉眼能够看出其拉伸收缩的动画效果。 开始用javascript进行编写： 首先在之前水平方向的导航栏上进行操作，将第一栏和选中栏的样式只改变为背景变黑色，文字变白色 .on,a:hover{background:#000000;color:#FFFFFF;}  之后开始写javascript脚本： [removed] [removed]=function(
支持多级的JS横向下拉导航菜单类
06-26
支持多级的JS横向下拉导航菜单类! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
js实现横向拖拽导航条功能
12-04
效果如下： ...div横向拖拽排序</title> [removed][removed] <style type="text/css"> body, div { padding: 0px; margin: 0px; } .box { position: relative; margin-left: 15px; pad
网页设计与制作（html5+csss3+js）课程中 横向纵向菜单运用方法及效果
weixin_45099830的博客
11-09 910
以上就是横向菜单及纵向菜单运用方法，并运用到了css样式，要注意到的是此css样式用的是外链式方法！首先这种方法的运用为两部分，一部分是列表代码和文字内容，另外一部人是css样式。
html导航栏横向展开,js实现横向伸展开的二级导航菜单代码
weixin_39820588的博客
05-30 839
本文实例讲述了js实现横向伸展开的二级导航菜单代码。分享给大家供大家参考。具体如下：这是一款js实现的横向伸展开二级导航菜单，鼠标放在一级菜单的第四个菜单项上，就能展开二级的菜单，菜单没有过多美化，只是一般的修饰，使用的朋友可根据您自己的网站风格重新美化菜单风格。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtm...
仿今日头条横向滚动导航栏--原生js
weixin_30273763的博客
03-20 1004
咳咳！先打一波小广告，在上一篇里忘记了，那啥……我的那个个人博客做好了-->(我的博客)<--。嘿嘿 好嘞，言归正传，说说我们的效果。 其实就是实现横向滑动，进行选择。 原理： 鼠标按下，获取当前鼠标坐标，作为起始坐标； 鼠标移动，获取坐标，与起始坐标进行一系列的数学运算； 给 left 赋值，改变位置； 移动过多，超过时进行处理。 function scr...
html与js二级菜单横排,JavaScript实现横向滑出的多级菜单效果
weixin_39904612的博客
06-08 516
本文实例讲述了JavaScript实现横向滑出的多级菜单效果。分享给大家供大家参考。具体如下：这是一款JavaScript横向滑出的多级菜单，只用鼠标放上就可以动画出现二级菜单，整体设计精美，大气，博客上也可以用哦。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...
常见的 HTML 标准
csdn_ad986ad的博客
04-30 779
HTML（Hypertext Markup Language）有多个版本和标准。
HTML 建立列表——列表标签
最新发布
yuxingwu9872的博客
05-06 248
定义列表标题;<dd>定义列表内容;说明:1. dt和dd对应着的, 一个dt可以对应着多个dd;2. dd完全是为了dt服务的, 对标题进行描述;<dl><dt>标题1</dt><dd>内容11</dd><dd>内容12</dd><dt>标题2内容21</dd><dd>内容22
vue实现点击横向导航栏实现导航左右滑动
03-29
要实现点击横向导航栏实现导航左右滑动，在Vue中可以使用如下步骤： 1. 在template中定义横向导航栏和导航内容区域： ```html <template> <div class="nav-container"> <div class="nav-bar"> <ul> <li v-for="(nav, index) in navList" :key="index" @click="handleNavClick(index)" :class="{ active: activeIndex === index }">{{nav}}</li> </ul> </div> <div class="nav-content" ref="navContent"> <div class="nav-item" v-for="(nav, index) in navList" :key="index">{{nav}}</div> </div> </div> </template> ``` 2. 在script中定义data和方法： ```javascript <script> export default { data() { return { navList: ['Nav1', 'Nav2', 'Nav3', 'Nav4'], // 导航栏列表 activeIndex: 0 // 当前激活的导航栏索引 } }, methods: { // 点击导航栏 handleNavClick(index) { this.activeIndex = index // 更新当前激活的导航栏索引 const navContent = this.$refs.navContent // 获取导航内容区域 const navItem = navContent.querySelectorAll('.nav-item')[index] // 获取对应的导航内容项 navContent.scrollLeft = navItem.offsetLeft - navContent.offsetLeft // 滚动到对应的导航内容项位置 } } } </script> ``` 3. 在style中定义样式： ```css <style scoped> .nav-container { display: flex; flex-direction: column; height: 100%; } .nav-bar { height: 40px; line-height: 40px; background-color: #f5f5f5; overflow-x: auto; white-space: nowrap; } .nav-bar ul { margin: 0; padding: 0; } .nav-bar li { display: inline-block; padding: 0 20px; font-size: 14px; cursor: pointer; } .nav-bar li.active { color: #1890ff; border-bottom: 2px solid #1890ff; } .nav-content { flex: 1; overflow-x: auto; white-space: nowrap; } .nav-item { display: inline-block; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; } </style> ``` 这样就可以实现点击横向导航栏实现导航左右滑动了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值