Sayfa Icerigi

Sliding Doors Vertical Menu

Yazan: ABAZAR

Bu güzel yastıklı fare bir menü öğesi veya dışında olup olmadığına bağlı olarak iki arka plan görüntüleri arasındaki dikey menü swapları. Görüntüsünü değiştirmek (özellikle IE) arasında mükemmel bir şekilde yumuşak bir geçiş sağlamak için, Kayar Kapılar tekniği ve içine iki kökenden birleştiren tek bir arka plan resmi kullanır.

Demo:

CSS:

<style type="text/css">
    .slidedoormenu{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 180px; /* width of menu (don't forget to add border with below!) */
    border-left: 8px solid #ffa1a3; /* thick left border of menu */
    }
    .slidedoormenu li{
    border-bottom: 1px solid #885b5c; /* Gray border beneath each menu item */
    }
    .slidedoormenu li a{
    background: white url(media/vstrip.gif) repeat-y left top; /* Background image positioned to the left(v) top(h) corner initially */
    font: bold 13px "Lucida Grande", "Trebuchet MS", Verdana;
    display: block;
    color: black;
    width: auto;
    border-bottom: 1px solid white; /* White border beneath each menu item link, to add depth */
    padding: 7px 0; /* Vertical (top/bottom) padding for each menu link */
    text-indent: 8px;
    text-decoration: none;
    }
    .slidedoormenu li a:visited, .slidedoormenu li a:active{
    color: black;
    }
    .slidedoormenu li a:hover{
    background-position: -387px 0; /* Shift background image horizontally 387px, or the start of the 2nd background image */
    color: black;
    }
    .slidedoormenu li.lastitem, .slidedoormenu li.lastitem a{
    border-bottom-width: 0; /* For last menu item within menu, remove bottom border */
    }
    .slidedoormenu li.lastitem a{
    padding: 8px 0; /* increase vertical border of last menu link by 2px (default is padding: 7px 0) to account for removed border width */
    }
    </style>
    <!--[if IE]>
    <style type="text/css">
    .slidedoormenu li a{ /* Menu link width value for IE */
    width: 100%;
    }
    </style>
    <![endif]-->

HTML:

Sayfa Icerigi

bl0gger

Sliding Doors Vertical Menu

Sliding Doors Vertical Menu