Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
» »Unlabelled » Menu đa cấp với CSS3 cho Web - Blog
Thứ Ba, 2 tháng 7, 2013

  Bài này mình hương dẫn bạn tạo menu da cấp giống blog của mình chỉ dùng CSS không dùng jQuery mà mình thấy vẫn đẹp.
 1. Web: bạn nên tạo 2 file để khi nào cần chỉnh sửa thị dễ thực hiện  :

CSS :
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 900px;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 2em;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;

-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

background: #8b8b8b; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#00CC66), to(#7a7a7a)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a); /* for firefox 3.6+ */

border: solid 1px #6d6d6d;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding:  8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#66CC00), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */

color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#66CC00), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important; /* for firefox 3.6+ */

color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#3D3D3D), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */

display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}

HTML:

<body>
    <div>
    <ul id="nav">
<li class="current"><a href="http://toantinit.blogspot.com/">Home</a></li>
<li><a href=""> Mathematics </a>
<ul>
             <li><a href="">Elementary</a>
     <ul>
<li><a href="">Number natural</a></li>
<li><a href=""> Number fraction</a></li>
<li><a href="">The total signal</a></li>
<li><a href="">The total ratio</a></li>
     </ul>
    </li>
    <li><a href="">High School</a>
<ul>
 <li><a href="">Design Wall</a></li>
</ul>
     </li>
    <li><a href="">College University
</a></li>
   <li><a href="">Discrete Mathematics</a></li>
</ul>
</li>


<li><a href="#"> Informatics </a>
   <ul>
     <li><a href="#">Office</a>
<ul>
 <li><a href="#">MS Word</a></li>
  <li><a href="#">MS Excel</a>
                    <li><a href="#">MS Access</a></li>
                     <li><a href="#">MS </a>
   <ul> <li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
  </ul>
 </li>
</li></ul>
</li>
             <li><a href="#">Programming C++</a></li>
        <li><a href="#">Programming Java</a></li>
<li><a href="#">Design Web</a></li>
<li><a href="#">Network Security</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>

2. Blog : bạn đăng nhập vào blog, vào phần chỉnh sửa mẫu và tìm đến đoạn </head> , chèn đoạn code css sau vào trước nó :
body {
font: normal .8em/1.5em Arial, Helvetica, sans-serif;
background: #ebebeb;
width: 900px;
margin: 100px auto;
color: #666;
}
a {
color: #333;
}
#nav {
margin: 0;
padding: 7px 6px 0;
line-height: 100%;
border-radius: 2em;

-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .4);

background: #8b8b8b; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#a9a9a9', endColorstr='#7a7a7a'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#00CC66), to(#7a7a7a)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #a9a9a9,  #7a7a7a); /* for firefox 3.6+ */

border: solid 1px #6d6d6d;
}
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
/* main level link */
#nav a {
font-weight: bold;
color: #e7e5e5;
text-decoration: none;
display: block;
padding:  8px 20px;
margin: 0;
-webkit-border-radius: 1.6em;
-moz-border-radius: 1.6em;
text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
background: #d1d1d1; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ebebeb', endColorstr='#a1a1a1'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#66CC00), to(#a1a1a1)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ebebeb,  #a1a1a1); /* for firefox 3.6+ */

color: #444;
border-top: solid 1px #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}
/* sub levels link hover */
#nav ul li:hover a, #nav li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#nav ul a:hover {
background: #0399d4 !important; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#04acec', endColorstr='#0186ba'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#66CC00), to(#0186ba)) !important; /* for webkit browsers */
background: -moz-linear-gradient(top,  #04acec,  #0186ba) !important; /* for firefox 3.6+ */

color: #fff !important;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 0 1px 1px rgba(0, 0, 0, .1);
}
/* level 2 list */
#nav ul {
background: #ddd; /* for non-css3 browsers */
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#cfcfcf'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#3D3D3D), to(#cfcfcf)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #fff,  #cfcfcf); /* for firefox 3.6+ */

display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 35px;
left: 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
/* level 3+ list */
#nav ul ul {
left: 181px;
top: -3px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
-webkit-border-top-left-radius: 9px;
-moz-border-radius-topleft: 9px;
-webkit-border-top-right-radius: 9px;
-moz-border-radius-topright: 9px;
}
#nav ul li:last-child > a {
-webkit-border-bottom-left-radius: 9px;
-moz-border-radius-bottomleft: 9px;
-webkit-border-bottom-right-radius: 9px;
-moz-border-radius-bottomright: 9px;
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#nav {
display: inline-block;
}
html[xmlns] #nav {
display: block;
}
* html #nav {
height: 1%;
}

Sau đó bạn vào phần bố cục, chọn thêm phần tử, thêm Java Script và chèn đoạn code sau vào :
<div>
    <ul id="nav">
<li class="current"><a href="http://toantinit.blogspot.com/">Home</a></li>
<li><a href=""> Mathematics </a>
<ul>
             <li><a href="">Elementary</a>
     <ul>
<li><a href="">Number natural</a></li>
<li><a href=""> Number fraction</a></li>
<li><a href="">The total signal</a></li>
<li><a href="">The total ratio</a></li>
     </ul>
    </li>
    <li><a href="">High School</a>
<ul>
 <li><a href="">Design Wall</a></li>
</ul>
     </li>
    <li><a href="">College University
</a></li>
   <li><a href="">Discrete Mathematics</a></li>
</ul>
</li>


<li><a href="#"> Informatics </a>
   <ul>
     <li><a href="#">Office</a>
<ul>
 <li><a href="#">MS Word</a></li>
  <li><a href="#">MS Excel</a>
                    <li><a href="#">MS Access</a></li>
                     <li><a href="#">MS </a>
   <ul> <li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
  </ul>
 </li>
</li></ul>
</li>
             <li><a href="#">Programming C++</a></li>
        <li><a href="#">Programming Java</a></li>
<li><a href="#">Design Web</a></li>
<li><a href="#">Network Security</a>
<ul>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
<li><a href="#">Sub-Level Item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">About</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>

3. Demo :


Người đăng: vào lúc 20:00

0 nhận xét:

Đăng nhận xét

Đăng ký: Đăng Nhận xét (Atom)
domain, domain name, premium domain name for sales

Popular Posts