Ben bir 'benzer' bir soru soruldu farkında ama diğer kullanıcı benden çok daha farklı bir yaklaşım kullanıyor. Ben sadece yolda daha kolay değiştirilmesi için benim PHP sayfalarında bir HTML navigasyon dahil çalışıyorum. Eğer bir düğme üzerinde dolaştığınızda 'etkin' sayfa her zaman vurgulanırken, bu vurgulanır. Hover html ve php sayfaları hem çalışır.
Benim indeks sayfası index.html olarak kodlanmış zaman, 'Etkin' durum çalışır. I index.php olarak çalıştırdığınızda, öyle değil.
Header.html
<div class="header_resize">
<div class="header">
<div class="logo"><a href="index"><img src="images/logo.gif" width="234" height="118" border="0" alt="logo" /></a></div>
<div class="menu">
<ul>
<li><a href="index.php"><span>Home Page </span></a></li>
<li><a href="portfolio.php"><span>Services</span></a></li>
<li><a href="portfolio.php"><span>Portfolio</span></a></li>
<li><a href="about.php"><span> About Us </span></a></li>
<li><a href="contact.php" class="active"><span> Contact Us</span></a></li>
</ul>
</div>
<div class="clr"></div>
</div>
</div>
CSS:
/*menu*/
.menu { padding:38px 0 0 0; margin:0; width:480px; float:right; }
.menu ul { text-align: left; padding:0; margin:0; list-style:none; border:0; float:right; }
.menu ul li { float:left; margin:0; padding:0 5px; border:0; }
.menu ul li a { float:left; margin:0; padding:12px 0; color:#fff; font:normal 12px Arial, Helvetica, sans-serif; text-decoration:none; }
.menu ul li a span { padding:12px 9px; background:none; }
.menu ul li a:hover { background: url(../images/r_menu.gif) no-repeat right; }
.menu ul li a:hover span { background:url(../images/l_menu.gif) no-repeat left; }
.menu ul li a.active { background:url(../images/r_menu.gif) no-repeat right; }
.menu ul li a.active span { background:url(../images/l_menu.gif) no-repeat left; }
Ben yukarıda bahsettiğimiz gibi HEADER.html yukarıdaki bağlantı (sayfa.html) olarak kodlanmış ise, "Etkin vurgulu" çalışır. Ne verir?
RESOLUTION
İlgilenenler için, KIRKBY yardım sayesinde, PHP ve kullanılan Request_URI işlevsellik olarak kayıtlı, HEADER.html dosyayı yeniden. Değişiklikler şöyle:
<div class="header_resize">
<div class="header">
<div class="logo"><a href="index"><img src="images/logo.gif" width="234" height="118" border="0" alt="logo" /></a></div>
<div class="menu">
<ul>
<li><a href="index" <?php if($_SERVER["REQUEST_URI"] == "/index") { echo 'class="active"';} ?>><span>Home Page </span></a></li>
<li><a href="about" <?php if($_SERVER["REQUEST_URI"] == "/about") { echo 'class="active"';} ?>><span> About Us </span></a></li>
<li><a href="portfolio" <?php if($_SERVER["REQUEST_URI"] == "/portfolio") { echo 'class="active"';} ?>><span>Services</span></a></li>
<li><a href="enroll" <?php if($_SERVER["REQUEST_URI"] == "/enroll") { echo 'class="active"';} ?>><span>Enroll</span></a></li>
<li><a href="contact" <?php if($_SERVER["REQUEST_URI"] == "/contact") { echo 'class="active"';} ?>><span> Contact Us</span></a></li>
</ul>
</div>
<div class="clr"></div>
</div>
</div>