Tạo menu linh hoạt dựa vào kích cỡ trình duyệt

Mình cũng không biết phải đặt tiêu đề như thế nào nữa, nhưng nói nôm na là bạn có thể tạo ra một menu linh động mà không phụ thuộc vào kích cỡ trình duyệt, cỡ bé hay to menu đều tự co giãn cho phù hợp

Nói thì khó hiểu nhưng khi bạn bắt tay vào làm thì sẽ hiểu ngay công dụng của nó ấy mà.
OK! Let’s go
Trước tiên tạo bộ khung cho menu đã

<article>
    <nav>
        <ul class="navbar" id="mainNavbar">
            <li><a href="/">Home</a></li>
            <li><a href="/products.html">Products</a></li>
            <!-- More nav items... -->
            <li><a href="/contact.html">Contact</a></li>
        </ul>
    </nav>
    <p>Here is our content.</p>
</article>
<aside>
    <p>Here is a side note about our content.</p>
</aside>

<nav>

<li><a href="/products.html">Products</a></li>

<li><a href="/contact.html">Contact</a></li>

</ul>

</nav>

<p>Here is our content.</p>

</article>

<aside>

<p>Here is a side note about our content.</p>

</aside>

Sau đó là thêm style cho nó nhé. Cái này là tùy bạn style thôi sao cho nó đẹp mắt các bạn là được.

body {
    font-family: sans-serif;
    font-size: 16px;
    background-color: #fff;
}
 
article {
    background-color: #eee;
    padding: 2.5%;
    margin-right: 1%;
    width: 64%;
    float:left;
}
 
aside {
    background-color: #ccc;
    padding: 2.5%;
    width: 25%;
    float: left;
}
.navbar {
    background-color: #055;
    margin: 0;
    padding: 0;
    width: 100%;
    line-height: 1;
    overflow: hidden;
}
 
.navbar li, .navbar a {
    display: inline-block;  
}
 
.navbar li {
    list-style-type: none;
}
 
.navbar > li {
    margin-left: .25em;
}
 
.navbar > li:first-child {
    margin-left: 0;
}
 
.navbar a {
    padding: .25em;
    text-decoration: none;
    height: 1em;
    font-weight: bold;  
    color: #fff;
}
 
.navbar a:hover {
    background-color: #088;
}

body {

font-family: sans-serif;

font-size: 16px;

background-color: #fff;

}

article {

background-color: #eee;

padding: 2.5%;

margin-right: 1%;

width: 64%;

float:left;

}

aside {

background-color: #ccc;

padding: 2.5%;

width: 25%;

float: left;

}

.navbar {

background-color: #055;

margin: 0;

padding: 0;

width: 100%;

line-height: 1;

overflow: hidden;

}

.navbar li, .navbar a {

display: inline-block;

}

.navbar li {

list-style-type: none;

}

.navbar > li {

margin-left: .25em;

}

.navbar > li:first-child {

margin-left: 0;

}

.navbar a {

padding: .25em;

text-decoration: none;

height: 1em;

font-weight: bold;

color: #fff;

}

.navbar a:hover {

background-color: #088;

}

Kết quả sẽ được như thế này

Khi độ rộng trình duyệt có sự thay đổi thì độ rộng menu thay đổi theo, ở đây chúng ta fix cho độ rộng của nó theo %

@media only screen and (max-width: 550px) {
    aside, article {
        width: 95%;
        float: none;
    }
 
    article {
        margin-right: 0;
        margin-bottom: 1em;
    }
}

@media only screen and (max-width: 550px) {

aside, article {

width: 95%;

float: none;

}

article {

margin-right: 0;

margin-bottom: 1em;

}

Tiếp theo, để làm được như ý muốn, chúng ta cần phải add thêm một plugin jquery nữa tại đây. Sau khi các bạn down về thì tiến hành add vào nhé

<html class="no-js">
<script src="modernizr.custom.js"></script>

1 2	<html class="no-js"> <script src="modernizr.custom.js"></script>

Và thêm đoạn css vào

.js .navbar {
    height: 1.5em;
    overflow: hidden;
}

.js .navbar {

height: 1.5em;

overflow: hidden;

}

Tiếp theo download flexMenu về

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="flexmenu.min.js"></script>
<script type="text/javascript">
    $('#mainNavbar').flexMenu();
</script>

$('#mainNavbar').flexMenu();

</script>

Sau khi xong chúng ta được thế này

Cuối cùng là style cho nó

.flexMenu-popup {
    padding: 0;
    background-color: #088;
    margin: 0;
}
 
.flexMenu-viewMore > a, .flexMenu-viewMore > a:hover {
    background-color: #5599AA;
}
 
.flexMenu-viewMore > a:after {
    display: inline-block;
    content:"";
    border-left:0.3em solid transparent;
    border-right:0.3em solid transparent;
    border-top:0.4em solid white;
    margin-left:0.4em;  
    position: relative;
    top: -.1em;
}
 
.flexMenu-viewMore.active > a, .flexMenu-viewMore.active > a:hover {
    background-color: #088; 
}
 
.flexMenu-popup > li > a, .flexMenu-popup > li {
    display: block;
}
 
.flexMenu-popup > li > a:hover {
    background-color: #3aa;
}

.flexMenu-popup {

padding: 0;

background-color: #088;

margin: 0;

}

.flexMenu-viewMore > a, .flexMenu-viewMore > a:hover {

background-color: #5599AA;

}

.flexMenu-viewMore > a:after {

display: inline-block;

content:"";

border-left:0.3em solid transparent;

border-right:0.3em solid transparent;

border-top:0.4em solid white;

margin-left:0.4em;

position: relative;

top: -.1em;

}

.flexMenu-viewMore.active > a, .flexMenu-viewMore.active > a:hover {

background-color: #088;

}

.flexMenu-popup > li > a, .flexMenu-popup > li {

display: block;

}

.flexMenu-popup > li > a:hover {

background-color: #3aa;

}

Vậy là xong. Bạn có thể xem qua hiệu quả của loại menu này dưới đây

View Demo Download Code

Chúc bạn có những giây phút vui vẻ với blog của tôi

Tạo menu linh hoạt dựa vào kích cỡ trình duyệt

Like this:

Có liên quan

Nguyễn Trung Hiếu

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu