namknaNGANH XỔ DỌC - HIỆU ỨNG TINH TẾ (15)

Drop Menu Ngang với hiệu ứng jquery

Fairstar | 08-02-2012 | nhận xét (24)

Một blog có nhiều chủ đề, nhãn, trang, và các bài viết thì phải sắp xếp các chủ đề chương mục đó sao cho hợp lý logic, Hôm nay namkna sẽ giới thiệu cho các bạn một mẫu Menu chuyển động với hiệu ứng jquery rất đẹp. Thích hợp cho các blog. Tuy sử dụng file jquery nhưng bạn yên tâm nó không làmh cậm tóc độ blog của bạn đi.

Demo Download

Các bước thực hiện:
1. Vào Thiết Kế -> Phần Tử Trang

2. Chọn Thêm Tiện Ích

3. Tạo một HTML/Javarscrip và thêm đoạn code bên dưới vào.

<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:14px;
    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;
    z-index:30; /* thuộc tính hiện menu con đối với các blog để nổi bracgrou */
}
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:12px;
    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>
            <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>

            <!-- 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>

Trong đó bạn thay:

Thay các dấu thăng màu xanh (#)thành các liên kết tới các bài viết, trang hoặc các laber

Thay các phần màu đỏ thành tên các bài viết, trang, laber tương ứng.

- Chú ý bạn nên thêm nó vào 1 Wiget ở trên phần header, nếu blog bạn chưa có phần thêm tiện ích ở trên header như blog demo của namkna thì bạn tham khảo bài viết hướng dẫn thêm tiện ích lên trên phần header Tại đây.

Chúc thành công!

Theo:Mr.Nguyễn Hải ™

MENU

Chủ Nhật, 20 tháng 5, 2012

NGANH XỔ DỌC - HIỆU ỨNG TINH TẾ (15)

Drop Menu Ngang với hiệu ứng jquery

Không có nhận xét nào:

Đăng nhận xét

Xem nhiều tuần qua

Giới thiệu về tôi

Lưu trữ Blog

Nhận xét mới nhất

Người theo dõi

Tổng số lượt xem trang

Liên kết