Dikey olarak kullanılabilecek. CSS ve imaj desteği ile şeffaf geçişler sağlanmış oldukça güzel bir CSS Menü Örneğidir.
Burada main_menu olarak belirttiğimiz alan sayfanın içerik alanıdır. Menü arka planı ile menü görünümü uyumlu olsun diye oluşturduk.
<div id="main_body"> <div id="menu_container"> <div id="top"></div> <div id="css_ornegi"> <ul> <li><a href="http://www.cssornekleri.com"><span>Ana Sayfa</span></a></li> <li><a href="http://www.cssornekleri.com"><span>Hakkımızda</span></a></li> <li><a href="http://www.cssornekleri.com"><span>Hizmetlerimiz</span></a></li> <li><a href="http://www.cssornekleri.com"><span>Referanslarımız</span></a></li> <li><a href="http://www.cssornekleri.com"><span>İnsan Kaynakları</span></a></li> <li><a href="http://www.cssornekleri.com"><span>İletişim</span></a></li> </ul> </div> </div> </div>
CSS Kodu
<style type="text/css"> #main_body {background: #202B31; width: 400px; padding: 10px;} ul {list-style: none;margin: 0;padding: 0;} img {border: none;} #menu_container {width:200px;background-color: #333A46;margin-left: 15px;margin-top: 36px;} #top {background-image: url('nav_top.gif');background-repeat:no-repeat;background-position:top left;height: 16px;} #bottom {background-image: url('nav_bottom.gif');background-repeat:no-repeat;background-position:bottom left;height: 16px;border-top:1px solid #000;} #css_ornegi {width: 200px;font-family: Arial, Helvetica, sans-serif;margin: 0;font-size: 70%;font-weight: bold;} #css_ornegi li a {height: 32px;voice-family: ""}"";voice-family: inherit;height: 24px;text-decoration: none;} #css_ornegi li a:link, #css_ornegi li a:visited {color: #ccc;display: block;background: url(css_ornegi.gif);padding: 8px 0 0 25px;} #css_ornegi li a:hover, #css_ornegi li #current {color: #fff;background: url(css_ornegi.gif) 0 -32px;border-bottom:1px solid #000;padding: 8px 0 0 27px;} </style>
|