技術提供:Blogger.

創意網頁設計,響應式網頁,部落格版型,資料庫,購物車,Bootstrap,RWD,html,css,php,jquery,MySQL,專營綠茶,紅茶,高山凍頂烏龍,阿里山杉林溪梨山大禹嶺茶及茶葉罐杯壺禮盒批發零售,兼營艋舺快遞,汽機車外送,中央果菜市場,環南市場,迪化街等地代購採買及各項代理服務! 孟甲服務專線:0952-916626
E-mail:roberchen3@gmail.com


導行列 menu jquery 語法


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>UI Elements: Large Drop Down Menu</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta name="description" content="UI Elements: Large Drop Down Menu" />
        <meta name="keywords" content="jquery, drop down, menu, navigation, large, mega "/>
<style>
ul.ldd_menu{
margin:0px;
padding:0;
display:block;
height:50px;
background-color:#D04528;
list-style:none;
font-family:"Trebuchet MS", sans-serif;
border-top:1px solid #EF593B;
border-bottom:1px solid #EF593B;
border-left:10px solid #D04528;
-moz-box-shadow:0px 3px 4px #591E12;
-webkit-box-shadow:0px 3px 4px #591E12;
-box-shadow:0px 3px 4px #591E12;
}
ul.ldd_menu a{
text-decoration:none;
}
ul.ldd_menu > li{
float:left;
position:relative;
}
ul.ldd_menu > li > span{
float:left;
color:#fff;
background-color:#D04528;
height:50px;
line-height:50px;
cursor:default;
padding:0px 20px;
text-shadow:0px 0px 1px #fff;
border-right:1px solid #DF7B61;
border-left:1px solid #C44D37;
}
ul.ldd_menu .ldd_submenu{
position:absolute;
top:50px;
width:550px;
display:none;
opacity:0.95;
left:0px;
font-size:10px;
background: #C34328;
border-top:1px solid #EF593B;
-moz-box-shadow:0px 3px 4px #591E12 inset;
-webkit-box-shadow:0px 3px 4px #591E12 inset;
-box-shadow:0px 3px 4px #591E12 inset;
}
a.ldd_subfoot{
background-color:#f0f0f0;
color:#444;
display:block;
clear:both;
padding:15px 20px;
text-transform:uppercase;
font-family: Arial, serif;
font-size:12px;
text-shadow:0px 0px 1px #fff;
-moz-box-shadow:0px 0px 2px #777 inset;
-webkit-box-shadow:0px 0px 2px #777 inset;
-box-shadow:0px 0px 2px #777 inset;
}
ul.ldd_menu ul{
list-style:none;
float:left;
border-left:1px solid #DF7B61;
margin:20px 0px 10px 30px;
padding:10px;
}
li.ldd_heading{
font-family: Georgia, serif;
font-size: 13px;
font-style: italic;
color:#FFB39F;
text-shadow:0px 0px 1px #B03E23;
padding:0px 0px 10px 0px;
}
ul.ldd_menu ul li a{
font-family: Arial, serif;
font-size:10px;
line-height:20px;
color:#fff;
padding:1px 3px;
}
ul.ldd_menu ul li a:hover{
-moz-box-shadow:0px 0px 2px #333;
-webkit-box-shadow:0px 0px 2px #333;
box-shadow:0px 0px 2px #333;
background:#AF412B;
}
</style>
<style>
            *{
                padding:0;
                margin:0;
            }
body{
                background:#f0f0f0;
                font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif;
overflow-x:hidden;

            }
            h1{
                font-size:180px;
                line-height:180px;
                text-transform: uppercase;
                color:#f9f9f9;
                position:absolute;
                text-shadow:0 1px 1px #ddd;
                top:-25px;
                left:-20px;
                white-space: nowrap;
            }
            span.reference{
                position:fixed;
                left:10px;
                bottom:10px;
                font-size:11px;
            }
            span.reference a{
                color:#DF7B61;
                text-decoration:none;
                text-transform: uppercase;
                text-shadow:0 1px 0 #fff;
            }
            span.reference a:hover{
                color:#000;
            }
            .box{
                margin-top:129px;
                height:460px;
width:100%;
                position:relative;
                -moz-box-shadow:0px 0px 10px #aaa;
-webkit-box-shadow:0px 0px 10px #aaa;
-box-shadow:0px 0px 10px #aaa;
            }
            .box h2{
color:#f0f0f0;
padding:40px 10px;
text-shadow:1px 1px 1px #ccc;
            }

        </style>
    </head>
    <body>
<h1>UI Elements</h1>
<div class="box">
<h2>Large Drop Down Menu Demo</h2>
<ul id="ldd_menu" class="ldd_menu">
<li>
<span>Vacations</span><!-- Increases to 510px in width-->
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li><a href="#">South America</a></li>
<li><a href="#">Antartica</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia and Australia</a></li>
<li><a href="#">Europe</a></li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li><a href="#">Sun &amp; Beach</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Science &amp; Education</a></li>
<li><a href="#">Extreme Sports</a></li>
<li><a href="#">Relaxing</a></li>
<li><a href="#">Spa and Wellness</a></li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li><a href="#">Paradise Islands</a></li>
<li><a href="#">Cruises &amp; Boat Trips</a></li>
<li><a href="#">Wild Animals &amp; Safaris</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Helping others &amp; For Hope</a></li>
<li><a href="#">Diving</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Equipment</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li><a href="#">South America</a></li>
<li><a href="#">Antartica</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia and Australia</a></li>
<li><a href="#">Europe</a></li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li><a href="#">Sun &amp; Beach</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Science &amp; Education</a></li>
<li><a href="#">Extreme Sports</a></li>
<li><a href="#">Relaxing</a></li>
<li><a href="#">Spa and Wellness</a></li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li><a href="#">Paradise Islands</a></li>
<li><a href="#">Cruises &amp; Boat Trips</a></li>
<li><a href="#">Wild Animals &amp; Safaris</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Helping others &amp; For Hope</a></li>
<li><a href="#">Diving</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
<li>
<span>Locations</span>
<div class="ldd_submenu">
<ul>
<li class="ldd_heading">By Location</li>
<li><a href="#">South America</a></li>
<li><a href="#">Antartica</a></li>
<li><a href="#">Africa</a></li>
<li><a href="#">Asia and Australia</a></li>
<li><a href="#">Europe</a></li>
</ul>
<ul>
<li class="ldd_heading">By Category</li>
<li><a href="#">Sun &amp; Beach</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Science &amp; Education</a></li>
<li><a href="#">Extreme Sports</a></li>
<li><a href="#">Relaxing</a></li>
<li><a href="#">Spa and Wellness</a></li>
</ul>
<ul>
<li class="ldd_heading">By Theme</li>
<li><a href="#">Paradise Islands</a></li>
<li><a href="#">Cruises &amp; Boat Trips</a></li>
<li><a href="#">Wild Animals &amp; Safaris</a></li>
<li><a href="#">Nature Pure</a></li>
<li><a href="#">Helping others &amp; For Hope</a></li>
<li><a href="#">Diving</a></li>
</ul>
<a class="ldd_subfoot" href="#"> + New Deals</a>
</div>
</li>
</ul>
</div>

        <div>
            <span class="reference">
                <a href="http://tympanus.net/codrops/2010/07/14/ui-elements-search-box/">monga</a>
            </span>
        </div>
<!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
/**
* the menu
*/
var $menu = $('#ldd_menu');

/**
* for each list element,
* we show the submenu when hovering and
* expand the span element (title) to 510px
*/
$menu.children('li').each(function(){
var $this = $(this);
var $span = $this.children('span');
$span.data('width',$span.width());

$this.bind('mouseenter',function(){
$menu.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':'510px'},300,function(){
$this.find('.ldd_submenu').slideDown(300);
});
}).bind('mouseleave',function(){
$this.find('.ldd_submenu').stop(true,true).hide();
$span.stop().animate({'width':$span.data('width')+'px'},300);
});
});
            });
        </script>
    </body>
</html>

響應式網頁架站只要6,888元起|[RWD]響應式網站,自適應網頁,讓SEO搜尋引擎最佳化你的網站

"[抽獎活動]高級方型刮痧板~價值250元?"

Related Posts Plugin for WordPress, Blogger...

0 意見 :

張貼留言

1.猛甲茶道,歡迎多留言,可以幫自己網站打廣告~
2.需要 猛甲茶道 回覆,請勿使用匿名留言[可使用名稱/網址,名稱填自己名字,若無網址,請填E-mail]。
3.匿名攻訐、不相干之廣告適用於無條件刪去法,望請海涵:)
4.您可以使用一些 HTML 標記,如:
 <b>粗體</b>, <i>斜體</i>, <a href='網址'>描述文字</a>


室內設計 101時尚舍 happy玩家 中華民國兩岸消費者權益保護協會 孟甲部落格 孟氏洋行 AMCT 骨節 雅弈 統愛眼鏡大批發