Thứ Ba, ngày 29 tháng 11 năm 2016

Share CODE Red Dropdown MENU Hiệu Ứng Đẹp Bằng CSS3

Nếu như website của bạn có quá nhiều liên kết, quá nhiều chuyên mục và cần phân chia rõ ràng trên thanh Dropdown MENU thì bài viết này chính là CODE bạn cần. Với CSS3 + HTML chúng ta đã xây dựng được một thanh RED MENU Hiệu Ứng Đẹp Mắt bằng CSS3 mà hiện nay rất nhiều trang web phổ biến đang sử dụng



Sau đây là các bước thực hiện:

1. CODE HTML

<div id='mainmenu'>
    <div class='wrap'>
        <nav id='nav'>
            <ul>
                <li class='mhome'><a href='#'>Home</a></li>
                <li><a href='#'>News</a></li>
                <li><a href='#'>Dropdown</a>
                    <ul class='submenu hidden'>
                        <li><a href='#'>Dropdown 1</a></li>
                        <li><a href='#'>Dropdown 2</a></li>
                        <li><a href='#'>Dropdown 3</a></li>
                        <li><a href='#'>Dropdown 4</a></li>
                    </ul>
                </li>
                <li><a href='#'>Business</a></li>
                <li><a href='#'>Education</a></li>
                <li><a href='#'>Lifestyle</a></li>
                <li><a href='#'>Fashion</a></li>
                <li><a href='#'>Photo</a></li>
                <li><a href='#'>Video</a></li>
            </ul>
        </nav>
        <div class='clear'></div>
    </div>
</div>


2. CODE CSS

<style type="text/css">
*{margin:0;padding:0}

ul, li, li {
  list-style: none;
}

a {
  textdecoration: none;
}

#mainmenu {
  background: #222;
  height: 50px;
  width: 980px;
  margin: 25px auto;
  padding: 0;
  border-bottom: 5px solid #ee1133;
}

#submenu {
  background: transparent;
  margin-bottom: 10px;
}

#nav ul {
  margin: 0;
  padding: 0;
}

#nav li {
  background: url(http://3.bp.blogspot.com/-GUh9UbWqUr4/UlBzMAlrbII/AAAAAAAABCI/dceZOq7l2tk/s1600/menuline.png) no-repeat right top;
  float: left;
  position: relative;
  padding: 0 28px 0 23px;
  margin: 0 0 0 0;
}

#nav li:last-child{
  background: none
}

#nav li a {
  color: #fff;
  display: inline-block;
  padding: 18px 0 18px 0;
  margin: 0 0 0 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 14px;
  text-transform: uppercase;
  text-decoration: none;
}

#nav ul li:hover {
  background-color: #ee1133;
  text-decoration: none;
}

#nav li:last-child a {
}

#nav ul.submenu {
  -moz-border-radius-bottomright: 3px;
  -moz-border-radius-bottomleft: 3px;
  position: absolute;
  top: 52px;
  left: 0px;
  width: 180px;
  z-index: 99;
  float: left;
  background: #2D2D2D!important;
  -webkit-box-shadow: 0 3px 4px 1px rgba(0,0,0,0.2);
  box-shadow: 0 3px 4px 1px rgba(0,0,0,0.2);
  -webkit-border-bottom-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-bottom-right-radius: 3px;
  -moz-border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  height: auto;
  -khtml-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: all .5s ease 0;
  -o-transition: all .5s ease 0;
  transition: all .5s ease 0;
  -moz-transition: all .5s ease 0;
  padding: 0;
  border: 3px solid#d900000;
}

#nav ul.submenu li {
  float: none;
  border-bottom: 1px solid #222;
  border-top: 1px solid #383838;
  border-left: 0 none;
  margin: 0;
}

#nav li:hover ul.submenu {
  -khtml-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  visibility: visible;
}

#nav ul.submenu li:first-child {
  border-top: 0 none;
}

#nav li.mhome {
  border: 0;
  margin-top: 0;
  background-color: #ee1133;
}
</style>

Chúc các bạn thành công!