ខាងក្រោមនេះជាStyle menu ថ្មីដែលត្រូវបានបង្កើត
ឡើងដោយភាសាកូដពីរគឺHTML និង CSS
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" href="Css.css">
<title>CSS3 drop down with CSS3</title>
</head>
<body>
<div class="example">
<div class="menuholder">
<ul class="menu slide">
<li><a href="#" class="red">Home</a></li>
<li><a href="#" class="orange">General</a>
<div class="subs">
<dl>
<dt>Welcome Link</dt>
<dd><a href="#">Printerest/Picasa</a></dd>
<dd><a href="#">Hotmail/Gmail</a></dd>
<dd><a href="#">Yahoo/Skpe</a></dd>
</dl>
<dl>
<dt>Welcome Progams</dt>
<dd><a href="#">Word/Excel</a></dd>
<dd><a href="#">Photoshops/Paint</a></dd>
<dd><a href="#">Slider/Powerpoint</a></dd>
</dl>
<dl>
<dt>Welcome Code</dt>
<dd><a href="#">HTML / CSS</a></dd>
<dd><a href="#">JAVA/ XTML</a></dd>
<dd><a href="#">PHP/C-Programe</a></dd>
</dl>
<dl>
<dt>Welcome CMS</dt>
<dd><a href="#">MySQL</a></dd>
<dd><a href="#">WordPress</a></dd>
<dd><a href="#">Joomla</a></dd>
</dl>
</div>
</li>
<li><a href="#" class="yellow">Contact Me</a>
<div class="subs">
<dl>
<dt>My Contact</dt>
<dd><a href="#">Facebook</a></dd>
<dd><a href="#">Gmail</a></dd>
</dl>
<dl>
<dt>Other Contact</dt>
<dd><a href="#">Hotmail</a></dd>
<dd><a href="#">Yahoo</a></dd>
</dl>
<dl>
<dt>MY website</dt>
<dd><a href="#">WordPress</a></dd>
<dd><a href="#">Blogger</a></dd>
</dl>
<dl>
<dt>World of Photos</dt>
<dd><a href="#">Images Photos</a></dd>
<dd><a href="#">Videos</a></dd>
</dl>
</div>
</li>
<li><a href="#" class="green">Bosco</a>
<div class="subs">
<dl>
<dt>Welcome Don Bosco </dt>
<dd><a href="#">CHILDREN FUND</a></dd>
<dd><a href="#">OUR CAMPUS</a></dd>
<dd><a href="#">DBFC</a></dd>
</dl>
<dl>
<dt>Welcome Sevice</dt>
<dd><a href="#">WEBSITE</a></dd>
<dd><a href="#">LAWN DREE</a></dd>
<dd><a href="#">HOLTEL</a></dd>
</dl>
<dl>
<dt>Teaching Online</dt>
<dd><a href="#">PHOTOSHOP</a></dd>
<dd><a href="#">AUDIOVISAUL</a></dd>
<dd><a href="#">CODE</a></dd>
</dl>
<dl>
<dt>Online CMS</dt>
<dd><a href="#">MySQL</a></dd>
<dd><a href="#">WordPress</a></dd>
<dd><a href="#">Joomla</a></dd>
</dl>
</div>
</li>
<li><a href="#" class="blue">About</a></li>
<li><a href="#" class="violet">Back</a></li>
</ul>
<div class="back"></div>
<div class="shadow"></div>
</div>
<div style="clear:both"></div>
</div>
</body>
</html>
CSS link
@charset "utf-8";
/* CSS Document */
/* demo page styles */
body {
background:#FFF;
margin:0;
padding:0;
}
.example {
position:relative;
background:#900 url(bosco%20house.jpg);
width:670px;
height:470px;
border:1px #000 solid;
margin:20px auto;
padding:15px;
border-radius:3px;
}
/* main menu styles */
.menuholder {
float:left;
font:normal bold 11px/35px verdana, sans-serif;
overflow:hidden;
position:relative;
}
.menuholder .shadow {
-moz-box-shadow:0 0 20px rgba(0, 0, 0, 1);
-o-box-shadow:0 0 20px rgba(0, 0, 0, 1);
-webkit-box-shadow:0 0 20px rgba(0, 0, 0, 1);
background:#888;
box-shadow:0 0 20px rgba(0, 0, 0, 1);
height:10px;
left:5%;
position:absolute;
top:-9px;
width:90%;
z-index:100;
}
.menuholder .back {
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
-webkit-transition-duration:.4s;
background-color:rgba(0, 0, 0, 0.5);
height:0;
width:100%;
}
.menuholder:hover div.back {
height:250px;
}
ul.menu {
display:block;
float:left;
list-style:none;
margin:0;
padding:0 125px;
position:relative;
}
ul.menu li {
float:left;
margin:0 5px 0 0;
}
ul.menu li > a {
border-radius:0 0 10px 10px;
box-shadow:2px 2px 4px rgba(0, 0, 0, 0.9);
color:#eee;
display:block;
padding:0 10px;
text-decoration:none;
transition:all 0.2s ease-in-out;
}
ul.menu li a.red {
background:#006;
}
ul.menu li a.orange {
background:#0F0;
}
ul.menu li a.yellow {
background:#F03;
}
ul.menu li a.green {
background:#666;
}
ul.menu li a.blue {
background:#909;
}
ul.menu li a.violet {
background:#300;
}
.menu li div.subs {
left:0;
overflow:hidden;
position:absolute;
top:35px;
width:0;
}
.menu li div.subs dl {
-moz-transition-duration:.2s;
-o-transition-duration:.2s;
-webkit-transition-duration:.2s;
float:left;
margin:0 130px 0 0;
overflow:hidden;
padding:40px 0 5% 2%;
width:0;
}
.menu dt {
color:#fc0;
font-family:arial, sans-serif;
font-size:12px;
font-weight:700;
height:20px;
line-height:20px;
margin:0;
padding:0 0 0 10px;
white-space:nowrap;
}
.menu dd {
margin:0;
padding:0;
text-align:left;
}
.menu dd a {
background:transparent;
color:#fff;
font-size:12px;
height:20px;
line-height:20px;
padding:0 0 0 10px;
text-align:left;
white-space:nowrap;
width:80px;
}
.menu dd a:hover {
color:#fc0;
}
.menu li:hover div.subs dl {
-moz-transition-delay:0.2s;
-o-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
margin-right:2%;
width:21%;
}
ul.menu li:hover > a,ul.menu li > a:hover {
background:#aaa;
color:#fff;
padding:10px 10px 0;
}
ul.menu li a.red:hover,ul.menu li:hover a.red {
background:#c00;
}
ul.menu li a.orange:hover,ul.menu li:hover a.orange {
background:#fc0;
}
ul.menu li a.yellow:hover,ul.menu li:hover a.yellow {
background:#cc0;
}
ul.menu li a.green:hover,ul.menu li:hover a.green {
background:#080;
}
ul.menu li a.blue:hover,ul.menu li:hover a.blue {
background:#00c;
}
ul.menu li a.violet:hover,ul.menu li:hover a.violet {
background:#8a2be2;
}
.menu li:hover div.subs,.menu li a:hover div.subs {
width:100%;
}
