Çalışmalarınıza Sağlam Menüler | CSS - Yatay |

[EmmanuelCulio10]

Menü 1

HTML KODU:

<div id="menu_wrapper" class="grey">
            <div class="left"></div>
            <ul id="menu">
                <li><a href="www.turkmmobyemmanuelculio10.com">Ana Sayfa</a></li>
                <li class="active"><a href="www.turkmmobyemmanuelculio10.com">Hakkımızda</a></li>
                <li><a href="www.turkmmobyemmanuelculio10.com">Hizmetlerimiz</a></li>
                <li><a href="www.turkmmobyemmanuelculio10.com">İletişim</a></li>
            </ul>
        </div>

CSS KODU:

<style type="text/css">
            body {
                padding: 50px;
            }
            /* The CSS Code for the menu starts here */
            #menu {
                font-family: Arial, sans-serif;
                font-weight: bold;
                text-transform: uppercase;
                margin: 20px 0;
                padding: 0;
                list-style-type: none;
                background-color: #eee;
                font-size: 13px;
                height: 40px;
                border-top: 2px solid #eee;
                border-bottom: 2px solid #ccc;
            }
            #menu li {
                float: left;
                margin: 0;                
            }
            #menu li a {
                text-decoration: none;
                display: block;
                padding: 0 20px;
                line-height: 40px;
                color: #666;
            }
            #menu li a:hover, #menu li.active a {
                background-color: #f5f5f5;
                border-bottom: 2px solid #DDD;
                color: #999;
            }
            #menu_wrapper ul {margin-left: 12px;}
            #menu_wrapper {padding: 0 16px 0 0; background: url(/img/menu/matte/grey.png) no-repeat right;}
            #menu_wrapper div {float: left; height: 44px; width: 12px; background: url(/img/menu/matte/grey.png) no-repeat left;}            
         
        </style>

Menü 2

HTML KODU:

<div id="topmenu_set">
    <ul id="ul_topmenu">

        <li><a href="index.php">ANA SAYFA</a></li>
        <li><a href="prices.php">HAKKIMIZDA</a></li>
        <li><a href="portfolio.php">HİZMETLER</a></li>
        <li><a href="about.php">İLETİŞİM</a></li>
        <li><a href="order.php" class="replace" id="btn_order"><span></span>order</a></li>
    </ul>
</div>

CSS KODU :

<style>
#topmenu_set{
    width:540px;
    height:55px;
    background: url(http://www.design2slice.co.uk/images/back_topmenu.jpg) no-repeat;
}
#ul_topmenu{
    float:right;
    margin: 0px;
    padding: 0px;
    font-size: 11px;
    font-family: Tahoma;
}
#ul_topmenu li{
    float:left;
    list-style:none;
    text-transform:uppercase;
}
#ul_topmenu li a{

    font-size:1.2em;
    color:#f3f5f2;
    text-decoration:none; 
    text-align:center;
    width:100px;
    height:30px;
    display:block;
    padding-top:20px;
    font-weight:bolder;
}
#ul_topmenu li a:hover{
    color:#b1ceff;
    text-decoration:none;
}
#ul_topmenu li #btn_order{
    width:121px;
    height:55px;
    text-align:left;
    float:left;
    font-size:1.2em;
    position:relative;
    overflow:hidden;
    margin:0;
    padding:0;
    display:block;
}
#ul_topmenu li #btn_order span{
    background:url(http://www.design2slice.co.uk/images/btn_order.jpg) no-repeat;
    position:absolute;
    width:100%;
    height:100%;
    cursor:pointer;
}
#ul_topmenu li #btn_order:hover span{
    background:url(http://www.design2slice.co.uk/images/btn_order.jpg) no-repeat 0 100%;
}
</style>

Menü 3

HTML KODU:

<ul id="navigation">
    <li class="b active"><a style="" href="#" class=""><strong>Ana Sayfa</strong></a></li>
    <li class="b"><a style="" href="#" class=""><strong>Hakkımızda</strong></a></li>
    <li class="b"><a style="" href="#" class=""><strong>Hizmetlerimiz</strong></a></li>
    <li class="b"><a style="" href="#" class=""><strong>Referanslar</strong></a></li>
    <li class="b"><a style="" href="#" class=""><strong>İletişim Bilgisi</strong></a></li>                                    
</ul>

CSS KODU:

<style>
    ol,ul {
    list-style: none;
}

#navigation {
    background: #000 url('/img/menu/genel/01/navigation.gif') no-repeat;
    width: 816px; height: 69px;
    padding: 0 10px;
}
#navigation li {
    float: left;
    height: 61px;
}
/* Used this because I couldn't remove one...ugh. */
.b {
    background: url('/img/menu/genel/01/nav_border.gif') no-repeat right 29px;
}
#navigation a {
    text-decoration: none;
    float: left;
    color: #868686;
}
#navigation a strong {
    text-decoration: none;
    float: left;
    color: #868686;
    height: 37px;
    padding: 24px 35px 0;
}
#navigation a:hover, #navigation .active {
    background: url('/img/menu/genel/01/nav_left.gif') no-repeat top left;
    float: left;
    color: #fff;
}
#navigation a:hover strong, #navigation .active strong {
    text-decoration: underline;
    background: url('/img/menu/genel/01/nav_right.gif') no-repeat top right;
    float: left;
    color: #fff;
    height: 37px;
    padding: 24px 35px 0;
}

</style>

Menü 4

HTML KODU :

<div id="stylefour">
    <ul>
        <li><a href="http://css.kobifis.com/menu/detay/2" title="css menus">Ana Sayfa</a></li>
        <li><a href="http://css.kobifis.com/menu/detay/2" title="css menus">Hakkımızda</a></li>
        <li><a href="http://css.kobifis.com/menu/detay/2" title="css menu" class="current">Hizmetler</a></li>
        <li><a href="http://css.kobifis.com/menu/detay/2" title="css menus">Projeler</a></li>
        <li><a href="http://css.kobifis.com/menu/detay/2" title="css menus">İletişim</a></li>
    </ul>
</div>

CSS KODU:

<style type="text/css">
<!–
#stylefour{position:relative;display:block;height:39px;font-size:11px;font-weight:bold;background:transparent url(../img/bgOFF.gif) repeat-x top left;font-family:Arial,Verdana,Helvitica,sans-serif;border-top:4px solid #B30000;}
#stylefour ul{margin:0;padding:0;list-style-type:none;width:auto;}
#stylefour ul li{display:block;float:left;margin:0;}
#stylefour ul li a{display:block;float:left;color:#666;text-decoration:none;padding:11px 20px 0 20px;height:23px;background:transparent url(../img/bgDIVIDER.gif) no-repeat top right;}
#stylefour ul li a:hover,#stylefour ul li a.current{color:#B30000;background:#fff url(../img/bgON.gif) no-repeat top right;}
–>
</style>

Menü 5

HTML KODU

<ul id="navigation-1">
        <li><a href="#" title="Home">Ana Sayfa</a></li>
        <li><a href="#" title="Products">Ürünler</a>
            <ul class="navigation-2">
                <li><a href="#" title="Electric Guitars">Ürünü Grubu</a></li>
                <li><a href="#" title="Acoustic Guitars">Ürünü Grubu <span>&raquo;</span></a>
                    <ul class="navigation-3">
                        <li><a href="#" title="Six String">Alt Ürün Grubu</a></li>
                        <li><a href="#" title="Twelve String">Alt Ürün Grubu</a></li>
                    </ul>
                </li>
                <li><a href="#" title="Bass Guitars">Ürünü Grubu</a></li>
                <li><a href="#" title="Accessories">Ürünü Grubu<span>&raquo;</span></a>
                    <ul class="navigation-3">
                        <li><a href="#" title="Guitar Stands">Alt Ürün Grubu</a></li>
                        <li><a href="#" title="Strings">Alt Ürün Grubu</a></li>
                        <li><a href="#" title="Tuners">Alt Ürün Grubu</a></li>
                        <li><a href="#" title="Plectrums">Alt Ürün Grubu</a></li>
                        <li><a href="#" title="Capos">Alt Ürün Grubu</a></li>
                        <li><a href="#" title="Cases">Alt Ürün Grubu</a></li>
                        <li><a href="#" title="Straps">Alt Ürün Grubu</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#" title="Your Account">Hesaplar</a>
            <ul class="navigation-2">
                <li><a href="#" title="Log In">Giriş</a></li>
                <li><a href="#" title="Register">Kayıt</a></li>
            </ul>
        </li>
        <li><a href="#" title="Help">Yardım</a>
            <ul class="navigation-2">
                <li><a href="#" title="FAQs">S.S.S.</a></li>
                <li><a href="#" title="Forum">Forum</a></li>
                <li><a href="#" title="Contact Us">İletişim</a></li>
            </ul>
        </li>
    </ul>

CSS KODU:

ul#navigation-1
    { margin:0; padding:1px 0; list-style:none; width:100%; height:21px; border-top:1px solid #b9121b; border-bottom:1px solid #b9121b; font:normal 8pt verdana, arial, helvetica;}
ul#navigation-1 li
    { margin:0; padding:0; display:block; float:left; position:relative; width:148px; }
ul#navigation-1 li a:link,
ul#navigation-1 li a:visited
    { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#b9121b; color:#ffffff; width:148px; height:13px; }
ul#navigation-1 li:hover a,
ul#navigation-1 li a:hover,
ul#navigation-1 li a:active
    { padding:4px 0; display:block; text-align:center; text-decoration:none; background:#ec454e; color:#ffffff; width:146px; height:13px; border-left:1px solid #ffffff; border-right:1px solid #ffffff; }
    
ul#navigation-1 li ul.navigation-2
    { margin:0; padding:1px 1px 0; list-style:none; display:none; background:#ffffff; width:146px; position:absolute; top:21px; left:-1px; border:1px solid #b9121b; border-top:none; }
ul#navigation-1 li:hover ul.navigation-2
    { display:block; }
ul#navigation-1 li ul.navigation-2 li
    { width:146px; clear:left; width:146px; }

ul#navigation-1 li ul.navigation-2 li a:link,
ul#navigation-1 li ul.navigation-2 li a:visited
    { clear:left; background:#b9121b; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }
ul#navigation-1 li ul.navigation-2 li:hover a,
ul#navigation-1 li ul.navigation-2 li a:active,
ul#navigation-1 li ul.navigation-2 li a:hover
    { clear:left; background:#ec454e; padding:4px 0; width:146px; border:none; border-bottom:1px solid #ffffff; position:relative; z-index:1000; }

ul#navigation-1 li ul.navigation-2 li ul.navigation-3
    { display:none; margin:0; padding:0; list-style:none; position:absolute; left:145px; top:-2px; padding:1px 1px 0 1px; border:1px solid #b9121b; border-left:1px solid #b9121b; background:#ffffff; z-index:900; }
ul#navigation-1 li ul.navigation-2 li:hover ul.navigation-3
    { display:block; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:link,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:visited
    { background:#b9121b; }
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li:hover a,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:hover,
ul#navigation-1 li ul.navigation-2 li ul.navigation-3 li a:active
    { background:#ec454e; }
ul#navigation-1 li ul.navigation-2 li a span
    { position:absolute; top:0; left:132px; font-size:12pt; color:#fe676f; }
ul#navigation-1 li ul.navigation-2 li:hover a span,
ul#navigation-1 li ul.navigation-2 li a:hover span
    { position:absolute; top:0; left:132px; font-size:12pt; color:#ffffff; }

NOT : HTML ve CSS Kodları Alıntıdır.. Önemli Olan Turkmmo Üyeleriyle Paylaşmak..
Emeğe Saygı

 

[UltraV-ı-olet]

tesekkürler

 

[EmmanuelCulio10]

tesekkürler

Önemli Değil.. :ka19:

 

[EmmanuelCulio10]

Konu Güncel

 

[emregency]

teşekkürler güzel paylaşıme