[1.6] Aynı Sayfaya 2. NavBar Nasıl Konur ?

[W.E.D.]

Arkadaşlar ben siteye bir navbar daha koymaya çalıştım. Ancak koyduğumda üstteki navbar bozuldu. Alttaki de düzgün çalışmadı bu nedenle. ID'sini değiştirdim ancak problem devam etti. CSS kodlarını geri kaldırınca düzeldi. Kodlar aşağıda, şimdi ben bu barı nasıl koyarım siteme ?

Site Adresim:

Kod:

www.naklowpc.com

Alıntı:Lets create the html used.
view plaincopy to clipboardprint?

PHP Kod:

<div class="wrapper">  
<div class="container"><ul class="menu" rel="sam1">  
<li class="active"><a href="#">Home</a></li>  
<li><a href="#">About</a></li>  
<li ><a href="#">Blog</a></li>  
<li><a href="#">Services</a></li>  
<li><a href="#">Portfolio</a></li>  
<li><a href="#">Contacts</a></li>  
<li><a href="#">Twitter @insic</a></li>  
</ul>  
</div>  
</div> 


Now the CSS.

Lets add a gradients using CSS3 gradient property into our wrapper div.
view plaincopy to clipboardprint?

PHP Kod:

.wrapper {  
    width: 100%;  
    height: 80px;  
    background : #464646;  
    background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));  
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));  
    border-top: 2px solid #939393;  
    position: relative;  
    margin-bottom: 30px;  
} 


The CSS code for the menu item.
view plaincopy to clipboardprint?

PHP Kod:

ul {  
    margin: 0;  
    padding: 0;  
}  
  
ul.menu {  
    height: 80px;  
    border-left: 1px solid rgba(0,0,0,0.3);  
    border-right: 1px solid rgba(255,255,255,0.3);  
    float:left;  
}  
  
ul.menu li {  
    list-style: none;  
    float:left;  
    height: 79px;  
    text-align: center;  
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );  
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);  
    }  
  
ul li a {  
    display: block;  
    padding: 0 20px;  
    border-left: 1px solid rgba(255,255,255,0.1);  
    border-right: 1px solid rgba(0,0,0,0.1);  
    text-align: center;  
    line-height: 79px;  
    background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));  
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));  
    -webkit-transition-property: background;  
    -webkit-transition-duration: 700ms;  
    -moz-transition-property: background;  
    -moz-transition-duration: 700ms;  
    }  
  
ul li a:hover {  
    background: transparent none;  
}  
  
ul li.active a{  
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );  
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);  
} 


Not: Kodlar çakışıyor, bu çakışmayı önlemek için: .wrapper { kısmını değiştirdim. Ancak ul kodları da çakışıyor. Teşekkür ederim şimdiden

[S.G]

Hocam menu kodları bunlar, siz nav demişsiniz hangini yapmak istiyorsunuz ? nav ile menüyü karıştırmayın..

[W.E.D.]

Pardon yanlış yazmışım Menü kodlarından bahsediyorum. 2 Menü de çakışıyor bu kodları koyduğumda. İkisini de birbirinden ayrı nasıl yüklerim aynı sayfaya ?

[haLiLx]

<navigation> kodunu dene eger kastin gezinti agacini iki defa gostermekse

[W.E.D.]

(02.11.2011, Saat: 03:17)haLiLx Adlı Kullanıcıdan Alıntı: <navigation> kodunu dene eger kastin gezinti agacini iki defa gostermekse

2 kez göstermek değil. Menü var bir tane. Başka bir menü kurunca, ikisinin kodları çakışıyor. Ama internetteki tüm menüler aynı. İnternete bakıyorum 2-3 menü koyan adamlar var. Onlar nasıl koyuyor ?

[S.G]

Buyrun hocam, şu kodları 2'ci menünün çıkmasını istediğiniz yerde kullanın, muhtemelen olacaktır..

CSS KODLARI:

PHP Kod:

ul {  
    margin: 0;  
    padding: 0;  
}  
  
ul.menu2 {  
    height: 80px;  
    border-left: 1px solid rgba(0,0,0,0.3);  
    border-right: 1px solid rgba(255,255,255,0.3);  
    float:left;  
}  
  
ul.menu2 li {  
    list-style: none;  
    float:left;  
    height: 79px;  
    text-align: center;  
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );  
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);  
    }  
  
ul li a {  
    display: block;  
    padding: 0 20px;  
    border-left: 1px solid rgba(255,255,255,0.1);  
    border-right: 1px solid rgba(0,0,0,0.1);  
    text-align: center;  
    line-height: 79px;  
    background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));  
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));  
    -webkit-transition-property: background;  
    -webkit-transition-duration: 700ms;  
    -moz-transition-property: background;  
    -moz-transition-duration: 700ms;  
    }  
  
ul li a:hover {  
    background: transparent none;  
}  
  
ul li.active2 a{  
    background: -webkit-gradient(radial, 50% 100%, 10, 50% 50%, 90, from(rgba(31,169,244,1)), to(rgba(0,28,78, 1)) );  
    background: -moz-radial-gradient(center 80px 45deg, circle cover, rgba(31,169,244,1) 0%, rgba(0,28,78, 1) 100%);  
} 


HTML KODLARI:

Kod:

<ul class="menu2" rel="sam1">  
<li class="active2"><a href="#">Home</a></li>  
<li><a href="#">About</a></li>  
<li ><a href="#">Blog</a></li>  
<li><a href="#">Services</a></li>  
<li><a href="#">Portfolio</a></li>  
<li><a href="#">Contacts</a></li>  
<li><a href="#">Twitter @insic</a></li>  
</ul>  
</div>

[W.E.D.]

Hepsi oldu ancak 1 tanesinde problem çıktı.

Kod:

ul li a {  
    display: block;  
    padding: 0 20px;  
    border-left: 1px solid rgba(255,255,255,0.1);  
    border-right: 1px solid rgba(0,0,0,0.1);  
    text-align: center;  
    line-height: 79px;  
    background : -webkit-gradient(linear, left top, left bottombottom, from(rgb(168,168,168)), to(rgb(69,69,69)));  
    background : -moz-linear-gradient(top, rgb(168,168,168), rgb(69,69,69));  
    -webkit-transition-property: background;  
    -webkit-transition-duration: 700ms;  
    -moz-transition-property: background;  
    -moz-transition-duration: 700ms;  
    }

Bu kod konduğunda, üstteki menü dağılıyor. Bu kod silindiğinde üstteki menü düzgün çalışıyor. Bu kodu nasıl düzenleyebiliriz ?

Kod:

ul li a {