Hướng dẫn tạo Arrowed sidebar menu bằng css

Bài hướng dẫn này không cần phải sử dụng bất cứ hình ảnh nào, chỉ cần dùng css là chúng ta đã có thể làm được một menu loại này rất đẹp. Cùng theo dõi nhé

Việc sử dụng ít hình ảnh trên website đi sẽ làm cho website load nhanh hơn

Xem qua demo trước cho bạn dễ hình dung sản phẩm của chúng ta.

I. HTML
Xây dựng cấu trúc html như dưới đây nhé. cái này bạn có thể thêm bớt tùy ý, nhưng tên class thì bạn nên để như vậy.

&lt;div class=&quot;sidebar&quot;&gt;
 &lt;ul class=&quot;nav&quot;&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu 1&lt;/a&gt;&lt;/li&gt;
 &lt;li class=&quot;active&quot;&gt;&lt;a href=&quot;#&quot;&gt;Menu 2&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu 3&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Menu 4&lt;/a&gt;&lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;

</ul>

</div>

II. CSS
Đầu tiên là đoạn css cho menu trước đã.

 body {
 background: #fefefe;
	font-family : Sans-serif;
 font-size: 1em;
}
.sidebar {
 background: #ebebeb;
 border-right: 1px solid #bdbdbd;
 left: 0;
	position: fixed;
 top: 0;
 height: 100%;
	width: 190px;
}

.nav {
	list-style-type: none;
 margin-left: -20px;
 margin-top: 0;
}

.nav li {
	background-color: #F0F0F0;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$lightColor , endColorstr=$darkColor);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#DBDBDB));
 background-image: -moz-linear-gradient(top, #F0F0F0, #DBDBDB);
 background-image: -o-linear-gradient(top, #F0F0F0, #DBDBDB);
 background-image: linear-gradient(top, #F0F0F0, #DBDBDB);
 border-bottom: 1px solid #BDBDBD;
 border-top: 1px solid white;
 height: 42px;
 line-height: 42px;
 margin-left: -20px;
}

.nav li:last-child {
 -webkit-box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, 0.1);
 -moz-box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, 0.1);
 box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, 0.1);
}

.nav li a {
 color: #616161;
 display: block;
 margin-left: 20px;
 text-decoration: none;
 text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

body {

background: #fefefe;

font-family : Sans-serif;

font-size: 1em;

}

.sidebar {

background: #ebebeb;

border-right: 1px solid #bdbdbd;

left: 0;

position: fixed;

top: 0;

height: 100%;

width: 190px;

}

.nav {

list-style-type: none;

margin-left: -20px;

margin-top: 0;

}

.nav li {

background-color: #F0F0F0;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$lightColor , endColorstr=$darkColor);

background-image: -webkit-gradient(linear, left top, left bottom, from(#F0F0F0), to(#DBDBDB));

border-bottom: 1px solid #BDBDBD;

border-top: 1px solid white;

height: 42px;

line-height: 42px;

margin-left: -20px;

}

.nav li:last-child {

-webkit-box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, 0.1);

-moz-box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, 0.1);

box-shadow: 0px 2px 10px 0 rgba(0, 0, 0, 0.1);

}

.nav li a {

color: #616161;

display: block;

margin-left: 20px;

text-decoration: none;

text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);

}

Sau đó, để tạo các online casino bonus no deposit arrow

.nav li.active {
 border-top: 1px solid #1768B9;
 border-bottom: 1px solid #0C2D49;
 -webkit-box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);
 -moz-box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);
 box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);
 background-color: #5FAEDF;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$lightColor , endColorstr=$darkColor);
 background-image: -webkit-gradient(linear, left top, left bottom, from(#5FAEDF), to(#4889B4));
 background-image: -moz-linear-gradient(top, #5FAEDF, #4889B4);
 background-image: -o-linear-gradient(top, #5FAEDF, #4889B4);
 background-image: linear-gradient(top, #5FAEDF, #4889B4);
 position: relative;
}

.nav li.active::after {
 content: &amp;amp;quot;&amp;amp;quot;;
 display: block;
 width: 26px;
 height: 20px;
 -moz-transform: rotate(62deg) skew(30deg);
 -webkit-transform: rotate(62deg) skew(30deg);
 transform: rotate(62deg) skew(30deg);
 margin-top: -32px;
 margin-left: 177px;
 background: #5FAEDF;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$lightBlue , endColorstr=$darkBlue);
 background: -webkit-gradient(linear, left top, right bottom, from(#5FAEDF), to(#4889B4));
 background: -moz-linear-gradient(-45deg, #5FAEDF, #4889B4);
 background: -o-linear-gradient(-45deg, #5FAEDF, #4889B4);
 background: linear-gradient(-45deg, #5FAEDF, #4889B4);
 border-top: 1px solid #1D6CAF;
 border-right: 1px solid #0C2D49;
 -webkit-box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);
 -moz-box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);
 box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);
}

.nav li.active a {
 color: white;
 text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.nav li.active {

border-top: 1px solid #1768B9;

border-bottom: 1px solid #0C2D49;

-webkit-box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);

-moz-box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);

box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);

background-color: #5FAEDF;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$lightColor , endColorstr=$darkColor);

background-image: -webkit-gradient(linear, left top, left bottom, from(#5FAEDF), to(#4889B4));

position: relative;

}

.nav li.active::after {

content: &amp;quot;&amp;quot;;

display: block;

width: 26px;

height: 20px;

-moz-transform: rotate(62deg) skew(30deg);

-webkit-transform: rotate(62deg) skew(30deg);

transform: rotate(62deg) skew(30deg);

margin-top: -32px;

margin-left: 177px;

background: #5FAEDF;

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=$lightBlue , endColorstr=$darkBlue);

background: -webkit-gradient(linear, left top, right bottom, from(#5FAEDF), to(#4889B4));

background: -moz-linear-gradient(-45deg, #5FAEDF, #4889B4);

background: -o-linear-gradient(-45deg, #5FAEDF, #4889B4);

background: linear-gradient(-45deg, #5FAEDF, #4889B4);

border-top: 1px solid #1D6CAF;

border-right: 1px solid #0C2D49;

-webkit-box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);

-moz-box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);

box-shadow: inset 0px 1px 0px 0 rgba(255, 255, 255, 0.2);

}

.nav li.active a {

color: white;

text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);

}

III.Jquery
Để khi click chuột vào arrow thì các menu nó cũng đổi hiệu ứng theo thì chúng ta sử dụng 1 ít jquery ở đây. cụ thể là đoạn mã dưới đây

$("a").click(function(e){
	var _elem = $(this);
 
 $("a").parent("li").each(function(){
 	$(this).removeClass("active");
 });
 
 _elem.parent("li").addClass("active");
});

$("a").click(function(e){

var _elem = $(this);

$("a").parent("li").each(function(){

$(this).removeClass("active");

});

_elem.parent("li").addClass("active");

});

Đoạn mã trên rất đơn giản, chỉ là sử lý sự kiện click vào nút a thì chúng ta sẽ remove class=”active” ở nút a cũ, và thêm class này vào nút a mới. Vậy là xong.

Tôi hy vọng bài viết này sẽ tạo cho các bạn một hướng đi mới trong thiết kế website để chúng tối ưu hơn.

Share this:

Like this:

Có liên quan

Nguyễn Trung Hiếu