CODEWITHSUNDEEP
phphtml
noahdotgansallo
noahdotgansallo

Reputation: 763

changing selected link in while using a header file

I'm using a header file for my side menu html. Of course, I have multiple pages and that are sometimes selected and when they are, the class changes to a selected class w/ a background color. I'm implementing a mix of side-menu and blog from purecss.io. Is there a way, while still using the one header file, to have the selected menu items change class/and color? This is what the code looks like and the menu on the left, I want the different items to change in correlation with whatever page I'm on while still using the one header file.

I basically want to change the class "pure-menu-selected" depending on the page that I'm on 

<ul>
    <li><a href="newest.php">Newest</a></li>
    <li><a href="trending.php">Trending</a></li>
    <li><a href="following.php" >Following</a></li>
    <li><a href="followers.php">Followers</a></li>
    <li><a href="javascript:create()">Create</a></li>
    <li><a href="search.php">Explore</a></li>
    <li class="pure-menu-selected"><a href="home.php">Feed</a></li>
    <li><a href="search-user.php">Search</a></li>
    <li class="menu-item-divided"><a href="profile.php"><?php echo "$firstname";?></a></li>
    <li><a href="settings.php">Settings</a></li>
    <li><a href="account.php">Account</a></li>
    <li><a href="logout.php">Log Out</a></li>
</ul>

Upvotes: 1

Views: 414

Answers (3)

Suman KC
Suman KC

Reputation: 3528

<script>
$(document).ready(function(){
$('ul li').click(function(){
    $('ul li').removeClass('pure-menu-selected');
    $(this).addClass('pure-menu-selected');
   });
});
</script>

JsFiddle : http://jsfiddle.net/QCH3q/1/

Upvotes: 1

Manu
Manu

Reputation: 931

Add to you li's a tag like this: (eg for the feed)

<li data-id="feed" class="pure-menu-selected"><a href="home.php">Feed</a></li>

In you css:

.pure-menu-selected[data-id=feed] {
  background-color: #123456;
}

Upvotes: 2

oleksii.svarychevskyi
oleksii.svarychevskyi

Reputation: 1106

The main idea is to check your request url if it is as you expected mark menu item as selected

<?php
$url = $_SERVER['REQUEST_URI'];
$selected = 'class="pure-menu-selected"';
>?
<ul>
    <li <?php echo (strpos($url, 'newest.php') !== false) ? $selected : '' ?>><a href="newest.php">Newest</a></li>
    <li <?php echo (strpos($url, 'trending.php') !== false) ? $selected : '' ?>><a href="trending.php">Trending</a></li>
    <li <?php echo (strpos($url, 'following.php') !== false) ? $selected : '' ?>><a href="following.php" >Following</a></li>
    <li <?php echo (strpos($url, 'followers.php') !== false) ? $selected : '' ?>><a href="followers.php">Followers</a></li>
    <li><a href="javascript:create()">Create</a></li>
    <li <?php echo (strpos($url, 'search.php') !== false) ? $selected : '' ?>><a href="search.php">Explore</a></li>
    <li <?php echo (strpos($url, 'home.php') !== false) ? $selected : '' ?>><a href="home.php">Feed</a></li>
    <li <?php echo (strpos($url, 'search-user.php') !== false) ? $selected : '' ?>><a href="search-user.php">Search</a></li>
    <li <?php echo (strpos($url, 'profile.php') !== false) ? $selected : '' ?>><a href="profile.php"><?php echo "$firstname";?></a></li>
    <li <?php echo (strpos($url, 'settings.php') !== false) ? $selected : '' ?>><a href="settings.php">Settings</a></li>
    <li <?php echo (strpos($url, 'account.php') !== false) ? $selected : '' ?>><a href="account.php">Account</a></li>
    <li <?php echo (strpos($url, 'logout.php') !== false) ? $selected : '' ?>><a href="logout.php">Log Out</a></li>
</ul>

Upvotes: 1

Related Questions