Active button with CSS and PHP

[said]

http://www.dzbatna.com/images/icons/icon30.gif Active button with CSS and PHP (http://www.dzbatna.com/t554868/)







رمز PHP:

<code style="white-space:nowrap"> <code> <div id="nav">
<ul id="mainnav">
<li><a href="index.php" title="Welcome page">Welcome</a></li>
<li><a href="about_us.php" title="About us page">About us</a></li>
<li><a href="services.php" title="Services page">Services</a></li>
<li><a href="testimonials.php" title="Testimonials page">Testimonials</a></li>
<li><a href="contact_us.php" title="Contact us page">Contact us</a></li>
</ul>
</div>
</code> </code>

Now let's attach the stylesheet:


رمز PHP:

<code style="white-space:nowrap"> <code> body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10pt;
margin: 0px;
padding:20px 0px;
text-align: center;
}
#nav {
padding: 0px;
width: 515px;
margin:0px auto;
}
#mainnav {
margin: 0px;
padding: 0px;
list-style-image: none;
list-style-type: none;
}
#mainnav li {
padding: 0px;
float: left;
margin:0px 3px 0px 0px;
}
#mainnav li a:link, #mainnav li a:visited, #mainnav li a:active {
color: #333;
text-decoration: none;
margin: 0px;
display: block;
float: left;
border-bottom:solid 5px #dadada;
padding: 0px;
width: 100px;
height: 20px;
text-align: center;
}
#mainnav li a:hover {
text-decoration: none;
border-bottom:solid 5px #333;
}
#mainnav li a.active:link, #mainnav li a.active:visited, #mainnav li a.active:active, #mainnav li a.active:hover {
text-decoration: none;
border-bottom:solid 5px #990000;
}



</code> </code>



Stylesheet simply formats our navigation giving it the bottom border of 5px.
Also on hover the border changes colour and when the button (link) is active we are applying a class=&quot;active&quot;.
Prietty straight forward.
Now at the top of each page, before any html or DOCTYPE definitions type the following:


رمز PHP:

<code style="white-space:nowrap"> <code> <?php $page = basename($_SERVER&#91;'SCRIPT_NAME'&#93;); ?> </code> </code>




This piece of php code will retrieve the name of the currently viewed page (i.e. index.php) and assing it to the $page variable.
In the navigation, after title in the index.php link add the following:

رمز PHP:

<code style="white-space:nowrap"> <code> <?php if ($page == 'index.php') { ?>class="active"<?php } ?> </code> </code>



Do the same for each link in the navigation replacing the 'index.php' with the name of the page it links to. Your code should now look like this:


رمز PHP:

<code style="white-space:nowrap"> <code> <div id="nav">
<ul id="mainnav">
<li><a href="index.php" title="Welcome page" <?php if ($page == 'index.php') { ?>class="active"<?php } ?>>Welcome</a></li>
<li><a href="about_us.php" title="About us page" <?php if ($page == 'about_us.php') { ?>class="active"<?php } ?>>About us</a></li>
<li><a href="services.php" title="Services page" <?php if ($page == 'services.php') { ?>class="active"<?php } ?>>Services</a></li>
<li><a href="testimonials.php" title="Testimonials page" <?php if ($page == 'testimonials.php') { ?>class="active"<?php } ?>>Testimonials</a></li>
<li><a href="contact_us.php" title="Contact us page" <?php if ($page == 'contact_us.php') { ?>class="active"<?php } ?>>Contact us</a></li>
</ul>
</div> </code> </code>



What this code does is it checks if variable $page is the same as the name of the link and if so it applyes class=&quot;active&quot; to it what changes the look of the link indicating that it's the one related to the currently viewed page.




http://www.dzbatna.com/images/smilies/shiny01.gif منقول من موقع أجنبي كل الي سويته إعادة التنسيق بس http://www.dzbatna.com/images/smilies/shiny01.gif
http://www.dzbatna.com/images/smilies/shiny01.gif والي موفاهم يترجم عاد بس مالي شغل لو ترجمه بجوجل GOOGLE http://www.dzbatna.com/images/smilies/shiny01.gif
http://www.dzbatna.com/images/smilies/shiny01.gif والي يترجم الدرس مفصل ترجمة صحيحة وينزله جزاء الله خير http://www.dzbatna.com/images/smilies/shiny01.gif
яoич






ألعاب الأندرويد مجانا و حصريا (http://www.apotox.info/forum)




https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-ash4/482113_236967293114455_1193518507_n.png (http://www.dzbatna.com)
©المشاركات المنشورة تعبر عن وجهة نظر صاحبها فقط، ولا تُعبّر بأي شكل من الأشكال عن وجهة نظر إدارة المنتدى (http://www.dzbatna.com)©