• <noscript id="imkki"></noscript>
  • <td id="imkki"><option id="imkki"></option></td><table id="imkki"><kbd id="imkki"></kbd></table>
  • 建站知識

    Welcome to Beijing RuiHeng TianLong Technology Co., Ltd.

    網站制作時,CSS圓角下拉菜單的樣式怎樣實現

    時間:  來源:網站建設公司  作者:網站制作公司  點擊量:
    相信有不少朋友在制作網站時,都遇到過圓角下拉菜單這種情況,有的朋友甚至想過用CSS+JS的方法,其實不必那么麻煩,純CSS就可以完成哦,下面給大家詳細介紹網站制作時,如何制作出圓角的下拉菜單: 首先,準備一個圓角的下拉菜單的圖片 ,我們隨便給圖片命名
    相信有不少朋友在制作網站時,都遇到過圓角下拉菜單這種情況,有的朋友甚至想過用CSS+JS的方法,其實不必那么麻煩,純CSS就可以完成哦,下面給大家詳細介紹網站制作時,如何制作出圓角的下拉菜單:
    首先,準備一個圓角的下拉菜單的圖片,我們隨便給圖片命名為:nav_n_li.png;
    其次我們將Html布局,內容如下:
    <div class="nav">
             <ul id="jsddm">
            <li><a href="index.html">首頁</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>
    最后我們來預覽一下:
    看,是不是圓角了呢,如果覺得圓度不夠的話,可以再重新切圖,這樣做的好處是用到的CSS3樣式少,所以兼容性比較好,它可以兼容各種瀏覽器,IE瀏覽器的話可兼容到IE8。并且用戶可在后臺任意添加或刪除下拉菜單列表而沒有任何影響。
    本文TAG標簽:
    返回關閉本頁
    上一篇:一篇文章教你怎么設計好banner    下一篇:制作網頁時,CSS背景圖片怎么定位?
    推薦閱讀

    Copyright © 2010-2021 北京瑞恒天龍科技有限公司  All Rights Reserved  |  北京網站建設知名服務商  |  北京網站制作 | 京ICP備11004170號-1   京公網安備110107000463號
    地址:北京市海淀區永定路長銀大廈B座  非工作時間:15810379666  服務熱線:010-89941606 座機:010-89941606 轉801/802/803/804  版權所有 盜版必究!

    在線咨詢
    關閉
    電話咨詢
    網站制作電話
    010-89941606
    国产成人在线观看视频|青草国产精品久久久久久久久|国产精品国产午夜免费福利看|亚洲图片国产日韩欧美
  • <noscript id="imkki"></noscript>
  • <td id="imkki"><option id="imkki"></option></td><table id="imkki"><kbd id="imkki"></kbd></table>