Trang Chính
1![[Code] Jungle Css menu Empty](https://2img.net/i/empty.gif)
[Code] Jungle Css menu Sun Nov 11, 2012 8:58 pm
Admin
Trùm Forum avatar-data : 57,11597|47,11460|50,11927|49,10992|64,12636|51,11466|48,12921|58,12249|66,11440
Posts : 354
Uy Tín : 13
Points : 1048
Giới tính : 
Posts : 354 Uy Tín : 13 Points : 1048 Giới tính : Rất mong những ai biết cách dùng hả dùng, đừng hỏi "chèn vào đâu" hay
"cái này xài thế nào". Cách sử dụng nguyên bộ thế nào thì viewsource
trang demo sẽ rõ tất. Đề phòng trang demo mất chèn thêm nguyên xi code
trang đó bên dưới với link menu.css có nội dung là đoạn css code bên
dưới.
CSS:
HTML:
"cái này xài thế nào". Cách sử dụng nguyên bộ thế nào thì viewsource
trang demo sẽ rõ tất. Đề phòng trang demo mất chèn thêm nguyên xi code
trang đó bên dưới với link menu.css có nội dung là đoạn css code bên
dưới.
CSS:
- Code:
/* CSS Document */
*{
margin:0;
padding:0;
}
#menu{
width:90%;
margin:25px auto;
}
#menu ul{
list-style:none;
}
#menu li{
display:block;
float:left;
}
#menu li a{
background:#749b10 url(images/menu_bg.gif) repeat-x;
border:2px solid #80a225;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 50px;
}
#menu li a span{
color:#52651f;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#menu li a:hover{
background:#e46825 url(images/menu_hover.gif) repeat-x;
border:2px solid #c04118;
text-decoration:none;
}
#menu li a:hover span{
color:#ffd9c7;
}
.current{
background:#e46825 url(images/menu_hover.gif) repeat-x;
border:2px solid #c04118;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
cursor:pointer;
font-weight:bold;
height: 50px;
}
.current span{
color:#ffd9c7;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
/* CSS Document */
*{
margin:0;
padding:0;
}
#menu_blue{
width:90%;
margin:25px auto;
}
#menu_blue ul{
list-style:none;
}
#menu_blue li{
display:block;
float:left;
}
#menu_blue li a{
background:#e4e8eb url(images/menu_bg_blue.gif) repeat-x;
border:2px solid #bdc5cd;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#2b61a1;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 50px;
}
#menu_blue li a span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#menu_blue li a:hover{
background:#e46825 url(images/menu_hover_blue.gif) repeat-x;
border:2px solid #4a88ce;
text-decoration:none;
}
#menu_blue li a:hover span{
color:#636363;
}
.current_blue{
background:#74befd url(images/menu_hover_blue.gif) repeat-x;
border:2px solid #4a88ce;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#2b61a1;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
cursor:pointer;
font-weight:bold;
height: 50px;
}
.current_blue span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
/* CSS Document */
*{
margin:0;
padding:0;
}
#menu_grey{
width:90%;
margin:25px auto;
}
#menu_grey ul{
list-style:none;
}
#menu_grey li{
display:block;
float:left;
}
#menu_grey li a{
background:#979797 url(images/menu_bg_grey.gif) repeat-x;
border:2px solid #939393;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
height: 50px;
}
#menu_grey li a span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
#menu_grey li a:hover{
background:#e46825 url(images/menu_hover_grey.gif) repeat-x;
border:2px solid #939393;
text-decoration:none;
}
#menu_grey li a:hover span{
color:#636363;
}
.current_grey{
background:#bcbcbc url(images/menu_hover_grey.gif) repeat-x;
border:2px solid #aeaeae;
margin:0 1px;
padding:15px 15px 15px 15px;
display:block;
float:left;
color:#fff;
text-transform:uppercase;
text-decoration:none;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-size:13px;
cursor:pointer;
font-weight:bold;
height: 50px;
}
.current_grey span{
color:#636363;
font-size:10px;
text-transform:lowercase;
font-family:Geneva, Arial, Helvetica, sans-serif;
font-weight:normal;
}
HTML:
- Code:
<div id="menu">
<ul>
<li class="current">Home<br /><span>takes you to<br /> home page</span></li>
<li><a href="#">About Us<br /><span>takes
you to<br />about us page</span></a></li>
<li><a href="#">Products<br /><span>takes
you to<br />products page</span></a></li>
<li><a href="#">Partners<br /><span>takes
you to<br />partners page</span></a></li>
<li><a href="#">Contact Us<br /><span>takes
you to<br />contact page</span></a></li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="menu_blue">
<ul>
<li class="current_blue">Home<br /><span>takes you to<br /> home page</span></li>
<li><a href="#">About Us<br /><span>takes
you to<br />about us page</span></a></li>
<li><a href="#">Products<br /><span>takes
you to<br />products page</span></a></li>
<li><a href="#">Partners<br /><span>takes
you to<br />partners page</span></a></li>
<li><a href="#">Contact Us<br /><span>takes
you to<br />contact page</span></a></li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="menu_grey">
<ul>
<li class="current_grey">Home<br /><span>takes you to<br /> home page</span></li>
<li><a href="#">About Us<br /><span>takes
you to<br />about us page</span></a></li>
<li><a href="#">Products<br /><span>takes
you to<br />products page</span></a></li>
<li><a href="#">Partners<br /><span>takes
you to<br />partners page</span></a></li>
<li><a href="#">Contact Us<br /><span>takes
you to<br />contact page</span></a></li>
</ul>
</div>
- Code:
http://13styles.com/demos/cssmenus/jungle/
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22%3E]www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/url]
<html xmlns="http://[url=http://www.w3.org/1999/xhtml%22%3E]www.w3.org/1999/xhtml">[/url]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Green Menu</title>
<link href="menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="menu">
<ul>
<li class="current">Home<br /><span>takes you to<br /> home page</span></li>
<li><a href="#">About Us<br /><span>takes
you to<br />about us page</span></a></li>
<li><a href="#">Products<br /><span>takes
you to<br />products page</span></a></li>
<li><a href="#">Partners<br /><span>takes
you to<br />partners page</span></a></li>
<li><a href="#">Contact Us<br /><span>takes
you to<br />contact page</span></a></li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="menu_blue">
<ul>
<li class="current_blue">Home<br /><span>takes you to<br /> home page</span></li>
<li><a href="#">About Us<br /><span>takes
you to<br />about us page</span></a></li>
<li><a href="#">Products<br /><span>takes
you to<br />products page</span></a></li>
<li><a href="#">Partners<br /><span>takes
you to<br />partners page</span></a></li>
<li><a href="#">Contact Us<br /><span>takes
you to<br />contact page</span></a></li>
</ul>
</div>
<div style="clear: both;"></div>
<div id="menu_grey">
<ul>
<li class="current_grey">Home<br /><span>takes you to<br /> home page</span></li>
<li><a href="#">About Us<br /><span>takes
you to<br />about us page</span></a></li>
<li><a href="#">Products<br /><span>takes
you to<br />products page</span></a></li>
<li><a href="#">Partners<br /><span>takes
you to<br />partners page</span></a></li>
<li><a href="#">Contact Us<br /><span>takes
you to<br />contact page</span></a></li>
</ul>
</div>
</body>
</html>
