• +84 909 333 021
  • This email address is being protected from spambots. You need JavaScript enabled to view it.

Hướng Dẫn Thiết Kế Website

Dropdown menu đẹp bằng Jquery & CSS cho thiết kế website

Bạn đánh giá: 0 / 5

Ngôi sao không hiệu lựcNgôi sao không hiệu lựcNgôi sao không hiệu lựcNgôi sao không hiệu lựcNgôi sao không hiệu lực
 

dropdown menu, thiet ke web 

Menu là một phần không thể thiếu trong các website. Chúng tôi xin giới thiệu đến các bạn 1 bộ dropdown menu cực đẹp dựa trên nền Jquery & CSS. Hãy xem ví dụ sau để có thể thiết kế 1 menu đẹp cho website của bạn.

Bước 1: Phần HTML
Tạo đoạn mã sau bằng HTML

{codecitation class="brush: html; gutter: true;"}

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Resources</a>
        <ul class="subnav">
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
    </li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Advertise</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

{/codecitation}

Bước 2: Phần CSS
Nhúng đoạn CSS sau vào giữa thẻ <head>

{codecitation class="brush: css; gutter: true;"}

ul.topnav {
    list-style: none;
    padding: 0 20px;
    margin: 0;
    float: left;
    width: 920px;
    background: #222;
    font-size: 1.2em;
    background: url(topnav_bg.gif) repeat-x;
}
ul.topnav li {
    float: left;
    margin: 0;
    padding: 0 15px 0 0;
    position: relative; /*--Declare X and Y axis base for sub navigation--*/
}
ul.topnav li a{
    padding: 10px 5px;
    color: #fff;
    display: block;
    text-decoration: none;
    float: left;
}
ul.topnav li a:hover{
    background: url(topnav_hover.gif) no-repeat center top;
}
ul.topnav li span { /*--Drop down trigger styles--*/
    width: 17px;
    height: 35px;
    float: left;
    background: url(subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
ul.topnav li ul.subnav {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    left: 0; top: 35px;
    background: #333;
    margin: 0; padding: 0;
    display: none;
    float: left;
    width: 170px;
    border: 1px solid #111;
}
ul.topnav li ul.subnav li{
    margin: 0; padding: 0;
    border-top: 1px solid #252525; /*--Create bevel effect--*/
    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: both;
    width: 170px;
}
html ul.topnav li ul.subnav li a {
    float: left;
    width: 145px;
    background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
    padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
    background: #222 url(dropdown_linkbg.gif) no-repeat 10px center;
}

{/codecitation}

Bước 3: Phần JQUERY
Nhúng đoạn javascript sau vào giữa thẻ <head>, trên đoạn CSS ta vừa nhúng.

{codecitation class="brush: css; gutter: true;"}

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">
$(document).ready(function(){

$("ul.subnav").parent().append("<span></span>");
//Only shows drop down trigger when js is enabled - Adds empty span tag after ul.subnav

$("ul.topnav li span").click(function() {
//When trigger is clicked...

//Following events are applied to the subnav itself (moving subnav up and down)
$(this).parent().find("ul.subnav").slideDown('fast').show();
//Drop down the subnav on click

$(this).parent().hover(function() {
}, function(){
$(this).parent().find("ul.subnav").slideUp('slow');
//When the mouse hovers out of the subnav, move it back up
});

//Following events are applied to the trigger (Hover events for the trigger)
}).hover(function() {
$(this).addClass("subhover");
//On hover over, add class "subhover"
}, function(){ //On Hover Out
$(this).removeClass("subhover");
//On hover out, remove class "subhover"
});

});
</script>

{/codecitation} 

Chú ý: Nếu trình duyệt web của bạn có bật javascript, menu sẽ chạy như sau

dropdown menu, thiet ke web

Nếu trình duyệt không bật javascript, sẽ có dạng như sau:

dropdown menu, thiet ke web 

Bạn có thể tải đoạn mã chúng tôi đã làm sẵn để tham khảo tại địa chỉ:
Hướng dẫn thiết kế menu web bằng Jquery & CSS


Monster Design

Chuyên nghiệp và ấn tượng đó là 2 từ mà chúng tôi có thể mô tả về công ty Monster Design. Tôi rất hài lòng với thiết kế và lập trình của Monster Design mang lại cho chúng tôi. Họ luôn sẵn sàng hỗ trợ ngay khi chúng tôi cần, nhưng vấn đề mà tôi luôn ấn tượng hơn hết đó là hiệu quả mà Monster Design đã mang lại cho chúng tôi.

Mr. Jeong Cheol - Giám Đốc Công Ty Cổ Phần Kỹ Thuật & Xây Dựng Handong - Hàn Quốc

Bài viết gần đây

Top từ khóa

No Tags found.