HTML/CSS/JS之---导航条案例

最新推荐文章于 2023-03-05 16:34:19 发布
最新推荐文章于 2023-03-05 16:34:19 发布
阅读量864 收藏 4
点赞数
分类专栏： Java Web 文章标签： HTMLcss javascript之
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35164169/article/details/75346598
版权

该程序分为三部分：css部分，html部分，java script部分

第一部分：css

 * {
     padding: 0;
     margin: 0;
     border: 0;
     outline: none;
     list-style-type: none;
 }

 em, i {
     font-style: normal;
 }

 a {
     color: #666;
     text-decoration: none;
 }

 a:hover {
     color: greenyellow;
 }

 body {
     color: #666;
     font: 12px/22px "Simsun", "宋体";
     overflow-x: hidden;
 }
/*结束 */
 .wrapper {
     width: 1920px;
     overflow: hidden;
     position: absolute;
     left: 50%;
     top: 0;
     margin: 0 0 0 -960px;
     height:600px;
 }
 /*第二部分*/
 .topNav {
     width: 100%;
     height: 47px;
     background: url(src/images/navbg.png);
     z-index: 1;
 }

 .topNavList {
     width: 1000px;
     height: 47px;
     margin: 0 auto;
 }

 .topNavSub {
     position: relative;
 }

 .topNav a {
     display: block;
     float: left;
     height: 47px;
     line-height: 47px;
     color:indianred;
     font: 16px/47px "Microsoft YaHei", "Simsun", "宋体";
     margin: 0 53px 0 13px;
     padding: 0 7px;
 }
 .activeTopNav {
     background: url(src/images/navItemBg_13.png) 0 -1px;
 }

 .activeLeft {
     width: 8px;
     height: 51px;
     position: absolute;
     top: -1px;
     background: url(src/images/navItemBg_12.png);
     display: none;
 }

 .activeRight {
     width: 10px;
     height: 51px;
     position: absolute;
     top: -1px;
     background: url(src/images/navItemBg_14.png);
     display: none;
 }
 /*第三部分*/
 .subNavWrapper {
     width: 1000px;
     height: 300px;
     position: absolute;
     left: 50%;
     top: 44px;
     margin: 0 0 0 -495px;
     z-index: 1;
     display: none;
 }

 .subNavSet {
     width: 1000px;
     height: 300px;
     margin: 0 auto;
     position: relative;
 }

 .subNav {
     position: relative;
     display: none;
 }

 .subNav ul {
     width: 132px;
     height: 234px;
     position: absolute;
     left: 23px;
     top: 16px;
     color: #333;
     font: 14px/30px "Simsun", "宋体";
 }

 .subNav ul a {
     width: 130px;
     display: block;
     padding: 0 0 0 16px;
     float: left;
     color: #333;
     font: 14px/34px "Microsoft YaHei", "Simsun", "宋体";
     background: url(src/images/arrowSub.png) left center no-repeat;
 }

 .subNav ul a:hover {
     color: #066;
     text-decoration: underline;
 }

 .sub1 {
     left: 144px;
 }

 .sub2 {
     left: 168px;
 }

 .sub3 {
     left: 262px;
 }

 .sub4 {
     left: 157px;
 }

 .sub5 {
     left: 263px;
 }

 .sub0 .subBgTopLeft, .sub1 .subBgTopLeft {
     width: 706px;
     height: 7px;
     display: block;
     background: url(src/images/subTop0.png);
 }

 .sub3 .subBgTopLeft {
     width: 706px;
     height: 7px;
     display: block;
     background: url(src/images/subTop3.png);
 }


 .sub5 .subBgTopLeft {
     width: 706px;
     height: 7px;
     display: block;
     background: url(src/images/subTop5.png);
 }

 .sub0 .subBgBotLeft, .sub1 .subBgBotLeft, .sub3 .subBgBotLeft, .sub5 .subBgBotLeft {
     width: 706px;
     height: 206px;
     display: block;
     background: url(src/images/subBot0.png);
 }

 .sub2 .subBgTopLeft {
     width: 832px;
     height: 7px;
     display: block;
     background: url(src/images/subTop2.png);
 }

 .sub4 .subBgTopLeft {
     width: 832px;
     height: 7px;
     display: block;
     background: url(src/images/subTop4.png);
 }

 .sub2 .subBgBotLeft, .sub4 .subBgBotLeft {
     width: 832px;
     height: 206px;
     display: block;
     background: url(src/images/subBot2.png);
 }

 .features {
     position: absolute;
     left: 195px;
     top: 19px;
 }

 .features i {
     width: 174px;
     display: block;
     float: left;
     margin: 0 40px;
 }

 .features a:hover img {
     border: 1px solid #448c8c;
 }

 .features i img {
     display: block;
     float: left;
     border: 1px solid #d7d8d8;
     margin-bottom: 12px;
 }

 .features i em {
     width: 174px;
     display: block;
     float: left;
     line-height: 20px;
 }

第二部分：html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   
</head>
<body>
<div class="wrapper">
    <div class="head">
        <div class="topNav">
            <div class="topNavList">
                <a href="#" class="">第一栏目</a>
                <a href="#" class="">第二栏目</a>
                <a href="#" class="">第三栏目</a>
                <a href="#" class="">第四栏目</a>
                <a href="#" class="">第五栏目</a>
                <a href="#" class="">第六栏目</a>
                <div class="topNavSub">
                    <div class="activeLeft" style="display: none; left: 725px;"></div>
                    <div class="activeRight" style="display: none; left: 811px;"></div>
                </div>
            </div>
        </div>
        <div class="subNavWrapper" style="display: none;">
            <div class="subNavSet">
                <div class="subNav sub0" style="display: none;">
                    <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
                    <ul style="width: 132px;">
                        <li>
                            <a href="#">第一栏目1</a>
                            <a href="#">第一栏目2</a>
                            <a href="#">第一栏目3</a>
                        </li>
                    </ul>
                    <span class="features" style="left: 195px;">
                  <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>净世界，美生活。</strong></em></a></i>
                  <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>诚信 专业 激情。</strong></em></a></i>
               </span>
                </div>
                <div class="subNav sub1" style="display: none;">
                    <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
                    <ul style="width: 132px;">
                        <li>
                            <a href="#">第二栏目1</a>
                            <a href="#">第二栏目2</a>
                            <a href="#">第二栏目3</a>
                        </li>
                    </ul>
                    <span class="features" style="left: 195px;">
                  <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>诚信 专业 激情。</strong></em></a></i>
                  <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>行业的领跑者。</strong></em></a></i>
               </span>
                </div>
                <div class="subNav sub2" style="display: none;">
                    <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
                    <ul style="width: 292px;">
                        <li>
                            <a href="#">第三栏目1</a>
                            <a href="#">第三栏目2</a>
                            <a href="#">第三栏目3</a>
                            <a href="#">第三栏目4</a>
                            <a href="#">第三栏目5</a>
                            <a href="#">第三栏目6</a>
                            <a href="#">第三栏目7</a>
                        </li>
                    </ul>
                    <span class="features" style="left: 315px;">
                  <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>精雕细刻 巧夺天工。</strong></em></a></i>
                  <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>精益求精 无微不至。</strong></em></a></i>
               </span>
                </div>
                <div class="subNav sub3" style="display: none;">
                    <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
                    <ul style="width: 132px;">
                        <li>
                            <a href="#">第四栏目1</a>
                            <a href="#">第四栏目2</a>
                            <a href="#">第四栏目3</a>
                        </li>
                    </ul>
                    <span class="features" style="left: 195px;">
                  <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>高新技术产品的研发和生产。</strong></em></a></i>
                  <i><a href="#"><img width="177" height="100" src="images/index2.jpg"><em><strong>提供优质的品牌产品和服务。</strong></em></a></i>
               </span>
                </div>
                <div class="subNav sub4" style="display: none;">
                    <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
                    <ul style="width: 292px;">
                        <li>
                            <a href="#">第五栏目1</a>
                            <a href="#">第五栏目2</a>
                            <a href="#">第五栏目3</a>
                            <a href="#">第五栏目4</a>
                            <a href="#">第五栏目5</a>
                            <a href="#">第五栏目6</a>
                            <a href="#">第五栏目7</a>
                        </li>
                    </ul>
                    <span class="features" style="left: 315px;">
                  <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>沟通创造价值。</strong></em></a></i>
                  <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>稳定和可持续发展。</strong></em></a></i>
               </span>
                </div>
                <div class="subNav sub5" style="display: none;">
                    <span><i class="subBgTopLeft"></i><i class="subBgBotLeft"></i></span>
                    <ul style="width: 132px;">
                        <li>
                            <a href="#">第六栏目1</a>
                            <a href="#">第六栏目2</a>
                        </li>
                    </ul>
                    <span class="features" style="left: 195px;">
                  <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>xxxxxxxxxxxxx。</strong></em></a></i>
                  <i><a href="#"><img width="177" height="100" src="images/index1.jpg"><em><strong>xxxxxxxxxxx。</strong></em></a></i>
               </span>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="src/bootstrap-3.3.7-dist/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="src/bootstrap-3.3.7-dist/js/script.js"></script>
</body>
</html>


第三部分：java script   (本人在连接java script时连接如两个javascript文件：1、jquery-1.9.1.min.js不用写直接下载       2、script.js自己写的下面给出代码)

$(document).ready(function() {
    nav();
})

var idx;
var arr_offsetX = [0, 144, 233, 345, 400, 450];

function nav() {

    $(".topNavList a").hover(function() {

        idx = $(".topNavList a").index(this);

        $(".subNavWrapper").show();
        $(".activeLeft").show();
        $(".activeRight").show();

        var offsetXArrow = $(".topNavList a").eq(idx).position().left - 455;
        var w = $(".topNavList a").eq(idx).width() + 22;

        $(".topNavList a").eq(idx).addClass("activeTopNav");
        $(".activeLeft").css("left", offsetXArrow+'px');
        $(".activeRight").css("left", offsetXArrow+w+'px');

        $(".subNavSet div").eq(idx).show();

        if (idx == 0 || idx == 1 || idx == 3 || idx == 5) {
            $(".subNavSet .subNav").eq(idx).find("ul").css("width", "132px");
            $(".subNavSet .features").eq(idx).css("left", "195px");
        } else {
            $(".subNavSet .subNav").eq(idx).find("ul").css("width", "292px");
            $(".subNavSet .features").eq(idx).css("left", "315px");
        };
    }, function() {
        $(".subNavWrapper").hide();
        $(".activeLeft").hide();
        $(".activeRight").hide();
        $(".topNavList a").eq(idx).removeClass("activeTopNav");
        $(".subNavSet div").eq(idx).hide();
    })

    $(".subNavSet div").hover(function() {
        $(".subNavWrapper").show();
        $(".topNavList a").eq(idx).addClass("activeTopNav");
        $(".activeLeft").show();
        $(".activeRight").show();
        $(this).show();
    }, function() {
        $(".subNavWrapper").hide();
        $(".activeLeft").hide();
        $(".topNavList a").eq(idx).removeClass("activeTopNav");
        $(".activeRight").hide();
        $(this).hide();

    })

}

本文有借鉴网上给的代码模板。代码中有些使用到图片我有在CSDN下载上传，

链接地址http://download.csdn.net/detail/qq_35164169/9903538。

初学者记得看自己代码中用到的图片路径，路径不一样会报错。

运行结果图：

学习让我快乐！偷笑偷笑偷笑


醉人乙
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
08-最新HTML5+CSS3+JavaScript实用案例大全（2181例）.rar
04-08
7个jQuery+Dragdealer.js内容滚动条拖拽滑动解7款CSS3超链接下划线动画特效代码 7款CSS3制作美化的搜索框样式代码 7款非常漂亮的CSS3鼠标hover图片动画特效 7款酷炫HTML5+Canvas全屏网页背景动画特效18款
HTML5学习：案例-导航
Mr_qing的博客
11-27 301
一、导航案例 1、、 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{
HTML+css+JS制作导航和banner
qq_53541336的博客
03-05 3540
如何利用HTML、css、j制作导航和banner图，一个整体的网页这两者是少不了的，在我看来应该也是最重要的部分，刚开始学习网页制作时对于小白的我来说其实这一块还是比较难的一点，尤其是banner轮播，随着后来老师的讲解以及自己课外的学习，慢慢的也就会做了，希望这篇文章能帮助到大家。
HTML+CSS+JS实现导航主页
zhansan的博客
06-16 809
HTML+CSS+JS实现导航主页
html css js 完整案例,html+css+js实例
weixin_31602525的博客
06-04 2586
【实例简介】用html+css+js做的一个简单小网页，可以作为初学者的参考资料。【实例截图】【核心代码】travel└── travel├── css.css├── images│ ├── 0.PNG│ ├── 100.jpg│ ├── 101.jpg│ ├── 102.jpg│ ├── 103.jpg│ ├── 104.png│ ├── 105.jpg│ ├──...
Javascript实现全选反选
风寻凡
06-28 276
Javascript实现全选反选
VeryIDE Bee 互动营销**台 v1.5 UTF-8.rar
08-30
VeryIDE Bee 互动营销**台特别适用于地方社区和垂直性网站，成功案例包括：化龙巷、柒零叁、北海365、烟台论坛和湖北网等等地方网站。 VeryIDE Bee V1.5版本更新**志： 修正 表单输入项不能对空格进行有效验证的...
JavaScript_JQuery_CSS_CSS_DIV漂亮的实例123个
10-11
2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...
react-admin system solution : react 后台管理系统解决方案
05-29
基础动画(animate.css 所有动画) 动画案例 表格 基础表格(antd 组件) 高级表格(antd 组件) 异步表格(数据来自掘金酱的接口) 表单 基础表单(antd 组件) 图表 echarts 图表 recharts 图表 页面 登录页面(包括 GitHub ...
原生JS实现导航下拉菜单效果
11-27
这个导航下拉菜单需要实现的功能是：下拉菜单的宽度与浏览器视口的宽度一样宽；一级导航只有两项，当...将导航这个导航条包裹在一个div中，这个div的position值为relative，高度为50px（导航条的高度为50px），宽度为
html+css导航栏案例展示
04-17
html+css导航栏案例展示。
html5+css3+js实现的导航栏
12-09
1、本demo实现的效果是：以及导航栏; 当鼠标移动到一级导航栏的标题上，相应二级菜单显示； 2、用到的技术：html5,css3,javaScript 3、如果这个demo对你有一点帮助，我的分享也是值得的；
HTML+CSS+JS_OringalDemo
04-02
动画源代码（引自GitHub），实现的主要功能有，人物的移动、人物买花操作以及其他相关组件的添加
HTML各种导航栏例子
07-10
HTML各种导航栏例子
带图片式导航html,js,css
06-23
带图片式导航，带图片式导航html,js,css
html css js实战案例,JS / CSS 常用实战代码片段
weixin_35276012的博客
07-01 275
CSS篇常用模式片段之CSS布局篇摘要：position 拉伸性质巧用，未知大小元素的居中，完备的 clearfix 写法，BFC性质，以及其他小案例常用模式片段之CSS兼容性摘要：颜色滤镜，居中hack常用模式片段之CSS弹性布局摘要：百分比布局，flex布局，自适应拉伸的图片布局，同步拉伸的列布局JS篇常用模式片段之JS视窗摘要：判断元素距离视窗的距离，判断到达页面底部，以及几种高度宽度常用模...
HTML + CSS + Javascript 简易示例
cds7777的博客
06-25 1509
HTML简易示例
WEB前端(7)—— 简单的 HTML+CSS 导航栏案例
qq_46187519的博客
09-08 9124
适合每个新手的导航栏： 代码与运行效果如图： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>导航栏</title> <style type="text/css"> ul{/*设置导航栏的框框*/ margin: 30px auto;/*框框整体的位置，30px是指离网页的顶部和下部的距离，auto控制的是左右距离为自动调节*/
css，js，html网页制作实例教程
05-12
网页制作教程网www.zzarea.com提供，更多CSS教程，ps教程，网页设计与网页制作教程请查看www.zzarea.com
使用 HTML/CSS 实现-顶部导航栏
最新发布
04-14
很高兴回答你的问题。关于使用 HTML/CSS 实现...您可以使用CSS的flexbox属性来设置导航栏的布局和位置，也可以使用CSS的hover伪类属性来增加导航栏的交互效果，使用户能更好地使用导航栏。希望这些建议对你有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值