学做网站培训课程介绍

当前位置：

如何制作带下拉子菜单的网站导航

自己建网站时，如果网站的栏目比较多，可以制作带下拉子菜单的导航菜单来存放。今天学做网站论坛就来介绍一下如何制作网站带下拉子菜单的导航菜单的方法。（相关教程：如何制作网站弹性二级下拉菜单）

先看下网站带下拉子菜单的导航菜单的效果：

方法/步骤

  1. 在网站导航位置，使用以下的HTML代码进行导航栏的制作；（代码里的文字和链接自行修改！） 
    

    <div class="g_nav">
    
<ul class="g_nav01">  
    

    
<li><a href="/">网站首页</a></li>
    
            
    
<li><a href="#">关于我们</a>
    
<div class="nav_tan" style="display: none;">
    
<a href="#">公司介绍</a>
    
<a href="#">发展经历</a>
    
<a href="#">人才招聘</a>
    
</div></li>            
    
<li><a href="#" target="_blank">产品中心</a>
    
<div class="nav_tan" style="display: none;">
    
<a href="#">一期产品</a>
    
<a href="#">二期产品</a>
    
<a href="#">三期产品</a>
    
<a href="#">四期产品</a>
    
</div></li>
    
<li><a href="#">公司新闻</a>
    
</li><li><a href="#">人才计划</a>
    
</li><li><a href="#">联系我们</a></li>         
    
</ul>
    
</div>
  2. 将以下的CSS样式代码放到自己网站的CSS文件里，用于控制网站下拉导航的样式； 
    

    .g_nav{ height:40px; background:#303133;}
    
.g_nav01{ width:1100px; margin:0 auto;}
    
.g_nav01 li{display:inline-block;text-align:center; border-right:#fff solid 1px; height:40px; line-height:40px; position:relative}
    
.g_nav01 a{ height:40px; line-height:40px; display:block;padding:0 10px; color:#fff; font-size:15px; }
    

    

    
.g_nav01 td.li a>div, .g_nav01 td:hover a>div{width:100%; height:3px; background-color:#ffc2310; position:absolute; top:57px;}
    
.g_nav01 a span{font-size:12px; color:#baa58c;}
    
.g_nav01 li .nav_tan{ display:none; width:100%; position:absolute; left:0; top:40px; padding:5px 0 10px 0; background-color:#3E4042; opacity:0.95; z-index:100;}
    
.g_nav01 li .nav_tan a{ width:90%; background:none; padding:0; margin:0 auto; line-height:30px; height:30px; font-size:12px; border-radius:0;text-overflow:ellipsis; white-space:lirap; overflow:hidden;}
    
.g_nav01 li .nav_tan a:hover{ width:90%; background:#ffa200; padding:0; margin:0 auto; line-height:30px; height:30px; font-size:12px;}
  3. 将以下的JS代码放到自己的头部文件里，用于控制下拉子菜单的显示与隐藏。 
    

    $(document).ready(function(){
    
    
    
    ///导航下拉
    
    $('.g_nav01 li').mouseover(function(){
    
    
    
    $(this).find('.nav_tan').stop(true,true).slideDown();
    
    $(this).children("a").addClass("cur");
    
    });
    
    $('.g_nav01 li').mouseleave(function(){
    
    
    
    $(this).find('.nav_tan').stop(true,true).slideUp('fast');
    
    $(this).children("a").removeClass("cur");
    
    });
    
    
    
});

通过以上三步的代码放置，我们就可以制作出一个带下拉子菜单的导航菜单了。以下是整个下拉菜单的导航代码：



<style>

/*********

网站带下拉子菜单的导航菜单

代码来源：学做网站论坛https://www.xuewangzhan.net/

*********/

.g_nav{ height:40px; background:#303133;}

.g_nav01{ width:1100px; margin:0 auto;}

.g_nav01 li{display:inline-block;text-align:center; border-right:#fff solid 1px; height:40px; line-height:40px; position:relative}

.g_nav01 a{ height:40px; line-height:40px; display:block;padding:0 10px; color:#fff; font-size:15px; }





.g_nav01 td.li a>div, .g_nav01 td:hover a>div{width:100%; height:3px; background-color:#ffc2310; position:absolute; top:57px;}

.g_nav01 a span{font-size:12px; color:#baa58c;}

.g_nav01 li .nav_tan{ display:none; width:100%; position:absolute; left:0; top:40px; padding:5px 0 10px 0; background-color:#3E4042; opacity:0.95; z-index:100;}

.g_nav01 li .nav_tan a{ width:90%; background:none; padding:0; margin:0 auto; line-height:30px; height:30px; font-size:12px; border-radius:0;text-overflow:ellipsis; white-space:lirap; overflow:hidden;}

.g_nav01 li .nav_tan a:hover{ width:90%; background:#ffa200; padding:0; margin:0 auto; line-height:30px; height:30px; font-size:12px;}

</style>

<script src="jquery.js"></script>

<script>



$(document).ready(function(){

    

    ///导航下拉

    $('.g_nav01 li').mouseover(function(){

    

    $(this).find('.nav_tan').stop(true,true).slideDown();

    $(this).children("a").addClass("cur");

    });

    $('.g_nav01 li').mouseleave(function(){

    

    $(this).find('.nav_tan').stop(true,true).slideUp('fast');

    $(this).children("a").removeClass("cur");

    });

    

});





</script>

<div class="g_nav">

<ul class="g_nav01">  



<li><a href="/">网站首页</a></li>

            

<li><a href="#">关于我们</a>

<div class="nav_tan" style="display: none;">

<a href="#">公司介绍</a>

<a href="#">发展经历</a>

<a href="#">人才招聘</a>

</div></li>

            

<li><a href="#" target="_blank">产品中心</a>

<div class="nav_tan" style="display: none;">

<a href="#">一期产品</a>

<a href="#">二期产品</a>

<a href="#">三期产品</a>

<a href="#">四期产品</a>

</div></li>

<li><a href="#">公司新闻</a>

</li><li><a href="#">人才计划</a>

</li><li><a href="#">联系我们</a></li>         

</ul>

</div>

更多关于网站下拉菜单和二级菜单的教程，请参考：网站二级菜单教程和网站下拉菜单教程。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 新手学习网站制作（0基础入门） 图文教程 (111794 次浏览)
    零基础新手要学习网站建设，以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了，才能为以后建网站打下坚实的基础。
  • 上海电气公司网站制作案例 图文教程 (15817 次浏览)
    这是一家上海电气公司网站，网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO，网站导航制作使用全屏宽度菜单，每个菜单项宽
  • 如何在网站上制作下拉菜单 图文教程 (130041 次浏览)
    在学做网站时，网站导航上经常有下拉菜单，这样可以在有限的导航上呈现出更多的栏目。如何在做网站时，能够制作出下拉菜单呢？【相关知识：如
  • 织梦二级导航制作 DEDE下拉菜单制作方法 图文教程附件下载 (134914 次浏览)
    在制作DEDECMS织梦网站的模板和学习仿站教程时，特别头痛的莫过于去制作网站的多级菜单导航了，很多时候制作出来的下拉菜单导航很多都会移位，使用固
  • 如何制作带下拉子菜单的网站导航 图文教程 (133786 次浏览)
    自己建网站时，如果网站的栏目比较多，可以制作带下拉子菜单的导航菜单来存放。今天学做网站论坛就来介绍一下如何制作网站带下拉子菜单的导航菜单的方
  • 怎么在后台给网站导航添加下拉子菜单？ (15690 次浏览)
    很多网站都会有下拉菜单功能，我们在做网站时也可以做这样的功能。在网站后台的菜单位置就可以设置下拉子菜单，你知道怎么在网站后台设置网站导航下拉
  • Dreamweaver跳转菜单制作 视频教程 (1123844 次浏览)
    什么是跳转菜单跳转菜单是文档内的弹出菜单，对站点访问者可见，并列出链接到文档或文件的选项。可以创建到整个 Web 站点内文档的链接、到其它 Web
  • Wordpress导航调用二级子菜单 图文教程 (121628 次浏览)
    在学做网站论坛的VIP课程中，我们讲了做网站时，我们网站的导航是调用一级分类和页面，可往往为了一些需要，登录制作wordpress下拉菜单，要求调用某个
  • 分享一个网址导航站模板 图文教程 (17464 次浏览)
    感谢VIP学员：卓新红  的无私分享，此模板已通过学做网站论坛网的审核，大家可放心使用。分享一个网址导航站模板，这个网址导航模板可以制作图片

建站培训课程

最新教程

其它教程