Mouseovers ve geçerli sayfa görüntüleri ile tek bir php sayfada bir gez çubuğu nasıl yapılır?

3 Cevap php

Normal, hover, ve mevcut sayfa: Ben üç eyalette ile navigasyon ile sayfaları yapma oldum. Normalde ben sadece basit bir mouseover komut dosyası kullanabilirsiniz, ve ben inaktif geçerli sayfa için linki ve farklı, üçüncü bir resim yapmak, böylece her sayfada navigasyon kodu içerir. Bu bunu yapmanın bir özensiz yoludur.

Bunu yapmanın en iyi yolu, bu yüzden tek bir başlık sayfasında tüm yazmak ve her sayfa için bu çağrı, henüz hala geçerli sayfa için bağlantıyı devre dışı bırakmak için yeteneği korumak ve görüntü anahtarlama ne var?

3 Cevap

ayrı bir başlık dosyaya koydu, sonra PHP, ("header.php") içerir diyoruz; ya da ne olursa olsun dosyanın adıdır. Eğer geçerli sayfayı almak için $ _SERVER ["REQUEST_URI"] kullanın ve bununla davranışını değiştirebilir.

Ben reddit kullanıcı grigri büyük bir cevap aldım.

Kafa Elemanı için PHP Code

<?php
if (!isset($selectedItem)) {
    $selectedItem = false;
}
$items = array(
    'home'     => array('title' => 'Home', 'url' => '/'),
    'lookbook' => array('title' => 'Look Book', 'url' => '/lookbook.html'),
    'random'   => array('title' => 'Random Article', 'url' => '/article.php?id=random')
);
$idx = 0;
echo '<ul id="menu">';
foreach($items as $key => $item) {
    echo sprintf('<li class="item%d">, $idx++);
    if ($key == $selectedItem) {
        echo sprintf('<a href="%s">%s</a>', $item['url'], $item['title']);
    }
    else {
        echo sprintf('<b>%s</b>', $item['title']);
    }
    echo '</li>';
}
echo '</ul>';
?>

Başlık elemanı çağırmak için PHP Code

<?php $selectedItem = 'home'; include 'menu.php'; ?>

Aşağıdaki gibi menu.png Lay dışarı

 80px                120px              60px
+---------------+-------------------+-----------------+
| Home (Normal) | Lookbook (Normal) | Random (Normal) | 30px
+---------------+-------------------+-----------------+
| Home (Hot)    | Lookbook (Hot)    | Random (Hot)    | 30px
+---------------+-------------------+-----------------+
| Home (Current)| Lookbook (Current)| Random (Current)| 30px
+---------------+-------------------+-----------------+

CSS

ul#menu {
    overflow: hidden;
    list-style: none;
}

#menu li {
    float: left;
    margin: 0; padding: 0;
}

#menu li a, #menu li b {
    height: 30px;
    overflow: hidden;
    float: left;
    display: block;
    text-indent: -9999px;
    background: url(../img/menu.png) no-repeat 0 0;
}

#menu li.item0 a { background-position:    0px 0; width:  80px; }   
#menu li.item1 a { background-position:  -80px 0; width: 120px; }   
#menu li.item2 a { background-position: -200px 0; width:  60px; }   

#menu li.item0 b { background-position:    0px -60px; width:  80px; }   
#menu li.item1 b { background-position:  -80px -60px; width: 120px; }   
#menu li.item2 b { background-position: -200px -60px; width:  60px; }   

#menu li.item0 a:focus { background-position:    0px -30px; }   
#menu li.item1 a:focus { background-position:  -80px -30px; }   
#menu li.item2 a:focus { background-position: -200px -30px; }   

#menu li.item0 a:hover { background-position:    0px -30px; }   
#menu li.item1 a:hover { background-position:  -80px -30px; }   
#menu li.item2 a:hover { background-position: -200px -30px; }

Devam edin ve jQuery varsayıyoruz gidiyorum

var check_current = function(itm){
  if(itm.href == window.location.pathname){
    itm.className = 'current_link';
  }
}
jQuery.each($('.nav_link'), check_current);

etiketler