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

™» CGC Blog «™ 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!

Nguồn : namkna.blogspot.com

Copy : CGC Blog

Khi copy, các bạn nhớ ghi rõ nguồn gốc. Xin chân thành cảm ơn!

6 Bình Luận:

Nặc danh

20.3.13

This could cause them to grow less, flower less, and maybe even die.
Owning a regular lawn mower does not mean you have to
give up on mulching
your yard; you just have to be willing to do some work.
Mulch also keeps soil from being depleted of vital nutrients,
so gardeners do not have to rotate planting locations from year
to year.

Khách

31.3.13

UFS mining shelters include the Rapid-Span, Supa-Span, and Alu-Span range of products,
these structures are all easily disassembled and cartable
making them excellent for interim facilities with resale
options. Some mining firms lost 30 per cent of their share values in the early August stock
market meltdown. Data mining is mostly a relatively new term that represents the process by
that predictive patterns are made from information.

11.4.13

In the US, we still express this as cubic inches, feet, or yards.

Also, keep in mind that the ingredients for the mix should be bought from a home
improvement store to insure quality. However, both
the methods have their own pros and cons.

Feel free to visit my web blog - concrete

12.4.13

The process is accomplished with just the
click of a button. Purchasing used press will also save you considerable amount of money.

Today, Most of newspapers are offering their online editions.
The process of printing conditions requires alteration of flow from a fan or pump.

Newspapers internationally are becoming more than ever like a television network providing current breaking news
stories.

Here is my site click here

20.4.13

One part compost to two or three parts potting soil would be
a sufficient combination. As much as you may want to grow radishes and lentils in your kitchen you don't want to blemish your frugal reputation. Each has his own concoction of soapy water, tobacco juice or hot pepper solutions to to deter these nasty pests and try those first.

Here is my website; embodiment

Most of these senior citizens are not comfortable with the use of
internet or are incapable of visiting the State
Comptrollers office and thus for them newspaper listings does the job.
Creating your own info or e-letter communication
could also be considered. Several news reports, writers, and analysts play a crucial role in the development of global news
undoubtedly. Thus, by putting the price, you get targeted customers who are very interested in what
you are offering; in other words, you get hot leads.
But I made it to a telephone and called Vito Genovese who was at that time the
most famous of New York's mafia bosses.

Feel free to surf to my web page: click here

Đăng nhận xét

☺ Nội quy comments của CGC Forum :
1. Comments không được sử dụng lời lẽ thiếu văn hóa, ảnh hưởng xấu đến chính trị, tổ chức, cá nhân.
2. Không được sử dụng comments với mục đích spam.
Những comments làm trái quy định sẽ bị xóa...!
Xin cảm ơn các bạn đã đóng góp comments và tuân thủ nội quy của blog !
Notice by Admin

CGC Forum | Thủ Thuật