5197.com

建站常识

Welcome to Beijing RuiHeng TianLong Technology Co., Ltd.

网站制作时,CSS圆角下拉菜单的样式怎样实现

时间:  来源:网站建设企业  编辑:网站制作企业  点击量:
相信有不少朋友在制作网站时,都遇到过圆角下拉菜单这种情况,有的朋友甚至想过用CSS+JS的方法,其实不必那么麻烦,纯CSS就可以完成哦,下面给大家详细先容网站制作时,如何制作出圆角的下拉菜单: 首先,准备一个圆角的下拉菜单的图片 ,大家随便给图片命名
相信有不少朋友在制作网站时,都遇到过圆角下拉菜单这种情况,有的朋友甚至想过用CSS+JS的方法,其实不必那么麻烦,纯CSS就可以完成哦,下面给大家详细先容网站制作时,如何制作出圆角的下拉菜单:
首先,准备一个圆角的下拉菜单的图片网站制作时,CSS圆角下拉菜单的样式怎样实现(图1),大家随便给图片命名为:nav_n_li.png;
其次大家将Html布局,内容如下:
<div class="nav">
         <ul id="jsddm">
        <li><a href="index.html">5197.com</a>
                 </li>
        <li><a href="about.html">企业概况</a>
            <ul>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li class="nav_ul_ul_li"><img src="images/nav_n_li.png" width="166" height="6" alt=""></li>
                       </ul></li>
        <li><a href="english.html">产品中心</a>
                  <ul>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li class="nav_ul_ul_li"><img src="images/nav_n_li.png" width="166" height="6" alt=""></li>
                       </ul></li>
        <li><a href="jihua.html">销售中心</a>
                  <ul>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li class="nav_ul_ul_li"><img src="images/nav_n_li.png" width="166" height="6" alt=""></li>
                       </ul></li>
            <li><a href="youxue.html">售后服务</a>
                  <ul>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li class="nav_ul_ul_li"><img src="images/nav_n_li.png" width="166" height="6" alt=""></li>
                       </ul></li>
        <li><a href="buy.html">联系大家</a>
                  <ul>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li><a href="#">子页</a></li>
                <li class="nav_ul_ul_li"><img src="images/nav_n_li.png" width="166" height="6" alt=""></li>
                       </ul></li>
    </ul>
</div>
以上为导航条的布局,大家是将nav_n_li.png图片放在每一个下拉菜单里,给最后一个li的;
 
接下来,大家再把样式写出来,内容如下:
.nav { height:45px; background:#e43b57; margin:0; padding:0;}
#jsddm{    width:1000px; margin:0 auto; font-size:14px;}/*对整个ul*/
#jsddm li { float: left; list-style: none; width:166px; line-height:45px; text-align:center; position:relative; font-size:16px;}/*Ul下的li*/
#jsddm li a { display: block; text-decoration: none; color:#FFF; white-space: nowrap}
#jsddm li a:hover { background:url(/images/nav_ul.png) no-repeat;/*导航下拉菜单图片*/ height:30px; line-height:30px; margin:7.5px auto; width:115px;}
 
#jsddm li ul { width:166px; top:45px; left:0; position:absolute; z-index:999; visibility:hidden; }
#jsddm li ul li { float:none/*对象不浮动*/; display:inline; width:166px; height:30px; line-height:30px; font-size:12px;}
#jsddm li ul li a { display:block; color:#fff; background:#e43b57;}
#jsddm li ul li a:hover { color:#ffb323; border-radius:0px; margin:0 auto; width:166px; height:30px; background:#e43b57;}
.nav_ul_ul_li { background:none;}
以上为CSS样式,部分内容可自行修改,例如背景色、宽度等;
 
最后就是JS部分了,别忘了要把JS库引用到文件里哦:
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
 
还要再引用一个JS文件,就是菜单实行的动作:
<script type="text/javascript" src="js/caidan.js">
var timeout         = 500;
var closetimer          = 0;
var ddmenuitem      = 0;
 
function jsddm_open()
{        jsddm_canceltimer();
         jsddm_close();
         ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}
 
function jsddm_close()
{        if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}
 
function jsddm_timer()
{        closetimer = window.setTimeout(jsddm_close, timeout);}
 
function jsddm_canceltimer()
{        if(closetimer)
         {        window.clearTimeout(closetimer);
                   closetimer = null;}}
 
$(document).ready(function()
{        $('#jsddm > li').bind('mouseover', jsddm_open);
         $('#jsddm > li').bind('mouseout',  jsddm_timer);});
 
document.onclick = jsddm_close;
</script>
最后大家来预览一下:网站制作时,CSS圆角下拉菜单的样式怎样实现(图2)
看,是不是圆角了呢,如果觉得圆度不够的话,可以再重新切图,这样做的好处是用到的CSS3样式少,所以兼容性比较好,它可以兼容各种浏览器,IE浏览器的话可兼容到IE8。并且用户可在后台任意添加或删除下拉菜单列表而没有任何影响。
本文TAG标签:
返回关闭本页
上一篇:一篇文章教你怎么设计好banner    下一篇:制作网页时,CSS背景图片怎么定位?
推荐阅读

Copyright ? 2010-2021 北京瑞恒天龙科技有限企业  All Rights Reserved  |  5197.com知名服务商  |  5197.com | 京ICP备11004170号-1   京公网安备110107000463号
地址:北京市海淀区永定路长银大厦B座  非工作时间:15810379666  服务热线:400-600-6204 座机:010-89941606 转801/802/803/804  版权所有 盗版必究!

在线咨询
关闭
电话咨询
网站制作电话
400-600-6204
XML 地图 | Sitemap 地图