Print this pageKode yang digunakan untuk membuat Menu Shadow seperti di atas adalah :
<html>
<head>
<style type="text/css">
#pad {height:100px;}
#menu {padding:0; margin:0 0 0 0px; list-style:none; width:90%; height:60px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnSXngna5jyAUS1JGhMM3b7VmGIc3yVAMGVe-Hx9cgJQ1SJw_lvCW17mBCDFSf5ztvNYSItL4O5UwHxltDR2Z8Ipcvl2eWliuot3xSwACGoNNGvkyLBwVSs34xNUYT2ZU-TIs3klrv6kVx/w700-h60-no/background.png)}
* html #menu {
margin:0;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnSXngna5jyAUS1JGhMM3b7VmGIc3yVAMGVe-Hx9cgJQ1SJw_lvCW17mBCDFSf5ztvNYSItL4O5UwHxltDR2Z8Ipcvl2eWliuot3xSwACGoNNGvkyLBwVSs34xNUYT2ZU-TIs3klrv6kVx/w700-h60-no/background.png', sizingMethod='scale');
}
#menu li {position:relative; float:left; margin:0 5px; padding-top:4px;}
#menu li a {display:block; height:26px; line-height:23px; padding:0 20px 0 0; float:left; color:#ddd; text-decoration:none; font-family:arial, sans-serif; font-size:11px;}
#menu li a b {display:block; height:26px; float:left; padding:0 0 0 20px;}
#menu li a:hover,
#menu li a:active,
#menu li a:focus,
.home #menu li#home a,
.single #menu li#single a,
.dropdown #menu li#dropdown a,
.dropline #menu li#dropline a,
.flyout #menu li#flyout a,
.support #menu li#support a,
.contact #menu li#contact a
{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcv0v3Esrc5ZJpibNRVq6IfBS_o3LwEQX5ywqn2ySiZG4oz2s-cA1BuFfJffDIKld-dV_70WcBpiFbMNklpjzp5XJhsDG6OjTnWD4bih3lkIwxW-EitgXzycmeDpQQBKV_klj5LxEnZahQ/w30-h26-no/taba.png) right top; cursor:pointer; color:#fff; line-height:25px;}
#menu li a:hover b,
#menu li a:active b,
#menu li a:focus b,
.home #menu li#home a b,
.single #menu li#single a b,
.dropdown #menu li#dropdown a b,
.dropline #menu li#dropline a b,
.flyout #menu li#flyout a b,
.support #menu li#support a b,
.contact #menu li#contact a b
{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgikpm-KKBQLMMyu1XwfcBhXar4hcnLqWy28u7jVu59P_JdlX5jmuxB8Qf7j2jmBtOc52kZ9RP84JzTz3C2ToyV0_g_ZT0-37mXNUCwnji-L5wsABV4E6NNlIG_U6XRbunY6RFKau2FRwxq/w301-h26-no/tabb.png) left top; cursor:pointer;}
</style>
</head>
<body>
<ul id="menu">
<li id="home"><a href="index.html"><b>Home</b></a></li>
<li id="single"><a href="single.html"><b>Single Level</b></a></li>
<li id="dropdown"><a href="dropdown.html"><b>Dropdown</b></a></li>
<li id="dropline"><a href="dropline.html"><b>Dropline</b></a></li>
<li id="flyout"><a href="flyout.html"><b>Flyout</b></a></li>
<li id="support"><a href="support.html"><b>Support</b></a></li>
</ul>
</body>
</html>
<head>
<style type="text/css">
#pad {height:100px;}
#menu {padding:0; margin:0 0 0 0px; list-style:none; width:90%; height:60px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnSXngna5jyAUS1JGhMM3b7VmGIc3yVAMGVe-Hx9cgJQ1SJw_lvCW17mBCDFSf5ztvNYSItL4O5UwHxltDR2Z8Ipcvl2eWliuot3xSwACGoNNGvkyLBwVSs34xNUYT2ZU-TIs3klrv6kVx/w700-h60-no/background.png)}
* html #menu {
margin:0;
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnSXngna5jyAUS1JGhMM3b7VmGIc3yVAMGVe-Hx9cgJQ1SJw_lvCW17mBCDFSf5ztvNYSItL4O5UwHxltDR2Z8Ipcvl2eWliuot3xSwACGoNNGvkyLBwVSs34xNUYT2ZU-TIs3klrv6kVx/w700-h60-no/background.png', sizingMethod='scale');
}
#menu li {position:relative; float:left; margin:0 5px; padding-top:4px;}
#menu li a {display:block; height:26px; line-height:23px; padding:0 20px 0 0; float:left; color:#ddd; text-decoration:none; font-family:arial, sans-serif; font-size:11px;}
#menu li a b {display:block; height:26px; float:left; padding:0 0 0 20px;}
#menu li a:hover,
#menu li a:active,
#menu li a:focus,
.home #menu li#home a,
.single #menu li#single a,
.dropdown #menu li#dropdown a,
.dropline #menu li#dropline a,
.flyout #menu li#flyout a,
.support #menu li#support a,
.contact #menu li#contact a
{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcv0v3Esrc5ZJpibNRVq6IfBS_o3LwEQX5ywqn2ySiZG4oz2s-cA1BuFfJffDIKld-dV_70WcBpiFbMNklpjzp5XJhsDG6OjTnWD4bih3lkIwxW-EitgXzycmeDpQQBKV_klj5LxEnZahQ/w30-h26-no/taba.png) right top; cursor:pointer; color:#fff; line-height:25px;}
#menu li a:hover b,
#menu li a:active b,
#menu li a:focus b,
.home #menu li#home a b,
.single #menu li#single a b,
.dropdown #menu li#dropdown a b,
.dropline #menu li#dropline a b,
.flyout #menu li#flyout a b,
.support #menu li#support a b,
.contact #menu li#contact a b
{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgikpm-KKBQLMMyu1XwfcBhXar4hcnLqWy28u7jVu59P_JdlX5jmuxB8Qf7j2jmBtOc52kZ9RP84JzTz3C2ToyV0_g_ZT0-37mXNUCwnji-L5wsABV4E6NNlIG_U6XRbunY6RFKau2FRwxq/w301-h26-no/tabb.png) left top; cursor:pointer;}
</style>
</head>
<body>
<ul id="menu">
<li id="home"><a href="index.html"><b>Home</b></a></li>
<li id="single"><a href="single.html"><b>Single Level</b></a></li>
<li id="dropdown"><a href="dropdown.html"><b>Dropdown</b></a></li>
<li id="dropline"><a href="dropline.html"><b>Dropline</b></a></li>
<li id="flyout"><a href="flyout.html"><b>Flyout</b></a></li>
<li id="support"><a href="support.html"><b>Support</b></a></li>
</ul>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar