Print this pageUntuk Membuat menu Circles cantik seperti contoh di atas kodenya sebagai berikut :
<html>
<head>
<style type="text/css">
#menuContainer {float:left; left:250px; width:176px; height:176px; position:relative;}
#menu {padding:0; margin:0; width:176px; height:176px; list-style:none; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9MmwBsgPj0z5nk7KeRJ7yESRsSoGXSGbZuFeoPycmy35tFvvwfPNxniPjhsoV-3vnMb94ec_6xKcbYN6NFW2v_3ZUczw_t_ni4ytSFXDQghWdRubQYq3QdQbp-n4IlSK9L3uJCUQohU-J/s176-no/grid.png);}
* html #menu {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9MmwBsgPj0z5nk7KeRJ7yESRsSoGXSGbZuFeoPycmy35tFvvwfPNxniPjhsoV-3vnMb94ec_6xKcbYN6NFW2v_3ZUczw_t_ni4ytSFXDQghWdRubQYq3QdQbp-n4IlSK9L3uJCUQohU-J/s176-no/grid.png', sizingMethod='scale');
}
#menu li a {display:block; width:42px; height:42px; background:url(trans.gif); position:absolute; left:0; top:0; color:#000; font-family:arial, sans-serif; font-size:11px; text-decoration:none;}
#menu li a b {display:block; width:80px; height:80px; position:absolute; left:-9999px; text-align:center;}
#menu li#home a {left:67px; top:0;}
#menu li#single a {left:120px; top:28px;}
#menu li#dropdown a {left:134px; top:86px;}
#menu li#dropline a {left:96px; top:131px;}
#menu li#flyout a {left:38px; top:131px;}
#menu li#support a {left:0; top:85px;}
#menu li#contact a {left:13px; top:28px;}
#menu li a:hover {white-space:nowrap;}
#menu li#home a:hover b {height:50px; left:-19px; top:50px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-pyCkzFloySPgQU1-gxUY1d_dr514HvRatFUv68JO0iXoinQW2pw9pJ94kcgvxDVWERmsquQDYUAFGJAMkIMrF7nAX9gq2F0NjEmf4xPfejTpZyRC-jC1Ih5Ql15syddJyTeN2lJksGs/s80-no/chome.png); padding-top:30px;}
#menu li#single a:hover b {height:50px; left:-72px; top:22px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRM_gjsG_rkEocqroYafo3bskjpjg1Pq4FxdfIOxJpn4d3QxudOEk4xDPEzsURvelsBGb_0nQPHem8O2ApuGpID-B5Ki4J9lxqVn98fY3TgdDPbqLwoKEPD-IqwOtoU6UK31LqzOV893Y5/s80-no/csingle.png); padding-top:30px;}
#menu li#dropdown a:hover b {height:50px; left:-86px; top:-36px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1wffiS39UykgOCmYJrdZ0qngFtD2aA51UXpGCY7x1pC8qDSpuM_K6M4omBfnjAvXR9A6z4sJ0RGC2DHb6slo8lDK_KNeaE1EhQQdaW_4HTslblehTXIiQrDl5lWiacWR3OmIiBphgER-_/s80-no/cdropdown.png); padding-top:30px;}
#menu li#dropline a:hover b {height:50px; left:-48px; top:-81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2j6NmnHyBTgI_cFhcRbWs7lgXMaPtIEYNKmgxB_lOqzUmDVMLAE1hyphenhyphenj_qlZ9rK2Iw19JvQQj9UmGgpxXg4ALjqtYuYva30qxUXXAUk9qQ2CEV2rMui0wRjZs4kUKDZo0PNOHrZPEFCiuP/s80-no/cdropline.png); padding-top:30px;}
#menu li#flyout a:hover b {height:50px; left:10px; top:-81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTyNTA78WhSFnnbUbHW1cPCYtSMz9cnv08FS7WF_Rp-Zd2RwZJ-MJG-yoaiMUQuHThF_1r82bPx6c4VBNZKs1f0HvETJOEDNU1VroamclCHdA1Ae6axyXU_DjVFugmnra_-GNLvLpwsRfs/s80-no/cflyout.png); padding-top:30px;}
#menu li#support a:hover b {height:50px; left:48px; top:-35px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtJMhom3516JSweLFPzaKK6kZ6vd-yLzDrPiUlLUyox0E6NNq6l2suoaVhKiFY3V9wnnhgvp2l6SbHz6YdHpF0yRWV2SIlYtn88UYpBJ85nQBJ4PSqBKzqle985M3Z5rgYnlKd9P8x8xC/s80-no/csupport.png); padding-top:30px;}
#menu li#contact a:hover b {height:50px; left:35px; top:22px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw3tpuwGPVjOKdRKOAOUYUoy2QAmIsLMuyq1piQOytP7p_31wXaS_1pfrVGOxQwEIehcZO56v7j_qCNuDsEmeKuOgCU2XfLclbCCEv1eT4I43P1waq20m84rXjHnLBXOVDU5MykTRs6A-3/s80-no/ccontact.png); padding-top:30px;}
* html #menu li#home a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/chome.png', sizingMethod='scale');}
* html #menu li#single a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/csingle.png', sizingMethod='scale');}
* html #menu li#dropdown a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/cdropdown.png', sizingMethod='scale');}
* html #menu li#dropline a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/cdropline.png', sizingMethod='scale');}
* html #menu li#flyout a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/cflyout.png', sizingMethod='scale');}
* html #menu li#support a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/csupport.png', sizingMethod='scale');}
* html #menu li#contact a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/ccontact.png', sizingMethod='scale');}
</style>
</head>
<body>
<div id="menuContainer">
<ul id="menu">
<li id="home" class="first"><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>
<li id="contact" class="last"><a href="contact.html"><b>Contact</b></a></li>
</ul>
</div>
</body>
</html>
<head>
<style type="text/css">
#menuContainer {float:left; left:250px; width:176px; height:176px; position:relative;}
#menu {padding:0; margin:0; width:176px; height:176px; list-style:none; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9MmwBsgPj0z5nk7KeRJ7yESRsSoGXSGbZuFeoPycmy35tFvvwfPNxniPjhsoV-3vnMb94ec_6xKcbYN6NFW2v_3ZUczw_t_ni4ytSFXDQghWdRubQYq3QdQbp-n4IlSK9L3uJCUQohU-J/s176-no/grid.png);}
* html #menu {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9MmwBsgPj0z5nk7KeRJ7yESRsSoGXSGbZuFeoPycmy35tFvvwfPNxniPjhsoV-3vnMb94ec_6xKcbYN6NFW2v_3ZUczw_t_ni4ytSFXDQghWdRubQYq3QdQbp-n4IlSK9L3uJCUQohU-J/s176-no/grid.png', sizingMethod='scale');
}
#menu li a {display:block; width:42px; height:42px; background:url(trans.gif); position:absolute; left:0; top:0; color:#000; font-family:arial, sans-serif; font-size:11px; text-decoration:none;}
#menu li a b {display:block; width:80px; height:80px; position:absolute; left:-9999px; text-align:center;}
#menu li#home a {left:67px; top:0;}
#menu li#single a {left:120px; top:28px;}
#menu li#dropdown a {left:134px; top:86px;}
#menu li#dropline a {left:96px; top:131px;}
#menu li#flyout a {left:38px; top:131px;}
#menu li#support a {left:0; top:85px;}
#menu li#contact a {left:13px; top:28px;}
#menu li a:hover {white-space:nowrap;}
#menu li#home a:hover b {height:50px; left:-19px; top:50px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjP-pyCkzFloySPgQU1-gxUY1d_dr514HvRatFUv68JO0iXoinQW2pw9pJ94kcgvxDVWERmsquQDYUAFGJAMkIMrF7nAX9gq2F0NjEmf4xPfejTpZyRC-jC1Ih5Ql15syddJyTeN2lJksGs/s80-no/chome.png); padding-top:30px;}
#menu li#single a:hover b {height:50px; left:-72px; top:22px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRM_gjsG_rkEocqroYafo3bskjpjg1Pq4FxdfIOxJpn4d3QxudOEk4xDPEzsURvelsBGb_0nQPHem8O2ApuGpID-B5Ki4J9lxqVn98fY3TgdDPbqLwoKEPD-IqwOtoU6UK31LqzOV893Y5/s80-no/csingle.png); padding-top:30px;}
#menu li#dropdown a:hover b {height:50px; left:-86px; top:-36px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1wffiS39UykgOCmYJrdZ0qngFtD2aA51UXpGCY7x1pC8qDSpuM_K6M4omBfnjAvXR9A6z4sJ0RGC2DHb6slo8lDK_KNeaE1EhQQdaW_4HTslblehTXIiQrDl5lWiacWR3OmIiBphgER-_/s80-no/cdropdown.png); padding-top:30px;}
#menu li#dropline a:hover b {height:50px; left:-48px; top:-81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2j6NmnHyBTgI_cFhcRbWs7lgXMaPtIEYNKmgxB_lOqzUmDVMLAE1hyphenhyphenj_qlZ9rK2Iw19JvQQj9UmGgpxXg4ALjqtYuYva30qxUXXAUk9qQ2CEV2rMui0wRjZs4kUKDZo0PNOHrZPEFCiuP/s80-no/cdropline.png); padding-top:30px;}
#menu li#flyout a:hover b {height:50px; left:10px; top:-81px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTyNTA78WhSFnnbUbHW1cPCYtSMz9cnv08FS7WF_Rp-Zd2RwZJ-MJG-yoaiMUQuHThF_1r82bPx6c4VBNZKs1f0HvETJOEDNU1VroamclCHdA1Ae6axyXU_DjVFugmnra_-GNLvLpwsRfs/s80-no/cflyout.png); padding-top:30px;}
#menu li#support a:hover b {height:50px; left:48px; top:-35px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQtJMhom3516JSweLFPzaKK6kZ6vd-yLzDrPiUlLUyox0E6NNq6l2suoaVhKiFY3V9wnnhgvp2l6SbHz6YdHpF0yRWV2SIlYtn88UYpBJ85nQBJ4PSqBKzqle985M3Z5rgYnlKd9P8x8xC/s80-no/csupport.png); padding-top:30px;}
#menu li#contact a:hover b {height:50px; left:35px; top:22px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw3tpuwGPVjOKdRKOAOUYUoy2QAmIsLMuyq1piQOytP7p_31wXaS_1pfrVGOxQwEIehcZO56v7j_qCNuDsEmeKuOgCU2XfLclbCCEv1eT4I43P1waq20m84rXjHnLBXOVDU5MykTRs6A-3/s80-no/ccontact.png); padding-top:30px;}
* html #menu li#home a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/chome.png', sizingMethod='scale');}
* html #menu li#single a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/csingle.png', sizingMethod='scale');}
* html #menu li#dropdown a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/cdropdown.png', sizingMethod='scale');}
* html #menu li#dropline a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/cdropline.png', sizingMethod='scale');}
* html #menu li#flyout a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/cflyout.png', sizingMethod='scale');}
* html #menu li#support a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/csupport.png', sizingMethod='scale');}
* html #menu li#contact a:hover b {background:none;filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='single_twentythree/ccontact.png', sizingMethod='scale');}
</style>
</head>
<body>
<div id="menuContainer">
<ul id="menu">
<li id="home" class="first"><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>
<li id="contact" class="last"><a href="contact.html"><b>Contact</b></a></li>
</ul>
</div>
</body>
</html>
Artikel Terkait
A M A R A J E N
0 komentar
Posting Komentar