Aktif sayfanın menü öğesi bir "seçilmiş" vermek için en etkili yolu nedir

3 Cevap php

Ben 5 sayfa var diyelim: A, B, C, D, ve E ben de bir yatay menü var, ve her madde açık gri arka planı vardır.

O orta-gri bir arka plan verir hover, ama etkin sayfa siyah bir arka plan olmasını istiyorsanız, bu yüzden tanımlayın: Her menü öğesi var

#black
{
    background-color: #000;
}

Kullanıcı B.php olduğunda Şimdi, ben B menü öğesi siyah # id taşımak istiyorum. Bunu yapmanın en iyi yolu nedir?

3 Cevap

Bir öneri; stil "yok" ne tanımlamak, sizin tarzı "" ne olduğunu tanımlamak değil. Bunun yerine onu aramak, # siyah deme. Akım.

Unutulmaması gereken başka bir şey ID benzersiz elemanları (# header, # altbilgi, # main, # kenar çubuğu, # navbar, vb) belirlenmesi içindir olmasıdır. Akım olarak tekrarlanabilir öğesi tanımlayan bir öğe ile ilişkili birden fazla sınıflar olabilir beri, bir sınıf ile yapılır, ama sadece tek bir kimlik olmalıdır. Yine, bu kimliği benzersiz adlandırma için ayrılmıştır.

.current
{
    background-color: #000;
}

Bir sayfada bu ilişkilendirmek için, onun üzerine, daha sonra kullanmak hangi sayfa gösterir sayfada bir değişken olabilecek bir blok veya anahtar durum varsa, geçerli sayfa ile ilgilidir öğesine stil eklemek için:

(pseudo code, my PHP syntax is rusty)

$current_page = "B"

// -- snip --

<ul>
    <li id="navigation-a" <? if ($current_page == "A") { ?> class="current" <? } ?> >Page A</li>
    <li id="navigation-b" <? if ($current_page == "B") { ?> class="current" <? } ?> >Page B</li>
</ul>

İsteğe bağlı isteği sayfa url $ CURRENT_PAGE kaynaklanan deneyebilirsiniz.

Ben (bir CMS tarafından desteklenmektedir değildir) bir proje için PHP kullanabilirsiniz, ben genelde menü (ler) oluşturmak için bir PHP dizi kullanın. Bu ekleme, bir diziden sayfaları taşımak veya silmek ve gerçek bir menü olarak PHP çıktı da bu izin ile oldukça kolaydır, tekrar tekrar aynı kodu yeniden yazmak zorunda değilsiniz.

Aktif olarak kabul edilmelidir hangi sayfa belirtmek için, buna benzer bir kod kullanabilirsiniz:

$currentPage = "b.php";

Ben bilerek tam bir dosya adı kullanmak unutmayın. Ben neden kısa biraz anlatacağım.

Her menü öğesi en az iki değişken (isim, url) gerektirir, ben her giriş için bir dizi inside menünün dizi kullanın. Örnek:

$menu = array(array("a.php", "A Title"), array("b.php", "B Title"), array("c.php", "C Title"));

Şimdi, PHP sihirli çalışma izin için, ben her madde geçiyor ve ben istediğiniz hangisi şekilde görüntüleyen bir foreach döngüsü kullanın.

foreach($menu as $num => $options){
  $s = ((isset($activePage) && $options[0] == $activePage) OR ($options[0] == basename($_SERVER['PHP_SELF'])) ? " class=\"active\"" : "";
  echo "\n\t<li{$s}><a href=\"" . $options[0] . "\">" . $options[1] . "</a></li>";
}

Vb hedefleri, başlık etiketleri, dahil etmek için bu kavram genişletebilirsiniz

Bu şekilde güzelliği her proje için tüm bu kadar yazmak zorunda kalmamasıdır. Sadece / hepsini kopyalayıp yapıştırın ve $ menü dizisindeki küçük bit değiştirmek ve (alt menü öğeleri için yani) gerekirse $ CurrentPage belirtebilirsiniz. $ CurrentPage belirtilmemişse, geçerli sayfa ($ _SERVER ['PHP_SELF']) aracılığıyla ne olduğunu kontrol için geri düşmek ve bu konuda etkin devleti temel edeceğiz.

Ben yeterince iyi açıkladım, ve kullanmak için yeterince iyi olduğunu umut!

(Küçük reddi, ben just kavramı için kullanıyorum-Ben çalışır iken yıldır-, burada ve orada bir yazım hatası yapmış olabilirim. Uyandım ve sıfırdan bu kodu yazdım. Özür dilemek eğer bu durumda!)

Geçerli sayfayı ne ilişkin <body> öğesine bir sınıf veya id atayabilirsiniz. Sonra her sayfanın yerel navigasyon stil ve böylece bu kullanarak. Her navigasyon listesi Ürünü link işaret ne ile ilgili bir dersi verecek.

yani.

ul.navigation a:link, ul.navigation a:visited {background-color:#eee}
ul.navigation a:active, ul.navigation a:hover, ul.navigation a:focus {background-color:#ccc}

body.about-us .navigation li.about-us-link a:link, body.about-us .navigation li.about-us-link a:visited {background-color:#000}

etiketler