CODEWITHSUNDEEP
htmlcsshtml-lists
HeLLBoY
HeLLBoY

Reputation: 41

How can I make the menu selected when I click on it using CSS for Dynamic links?

I've a common menu page called header.php, which I've included in my index and another page. Now I've to implement a facilities, through which, it will select the menu when I clicked it, and when I clicked another menu the select will jump to that. But the problem is, here I'm using dynamic pages (only two pages) one index.php and another suppose details.php, and and I'm using the link as

Here is the css that i'm using

    div.DHeader03 div.DHeader03MenuTop{background-color:#333;height:31px;float:left;width:100%;}div.DHeader03 div.DHeader03MenuTop a{padding:5px 10px 5px 10px;color:#ccc;float:left;}div.DHeader03 div.DHeader03MenuTop a:hover{color:#fff;background-color:#000;}

And below is my header.php page code (menu part only)

<div class="DHeader03">
    <div class="DHeader03MenuTop">
        <a href="http://www.banglanews24.com/new/categorizednews.php?newtype=15">Home</a>
        <a href="http://www.banglanews24.com/new/categorizednews.php?newtype=3">About</a>

    </div>
    <div class="DHeader03MenuBottom">
        <a href="http://www.banglanews24.com/new/categorizednews.php?newtype=33">Test</a>
        <a href="http://www.banglanews24.com/new/categorizednews.php?newtype=17">Contact</a>

    </div>
</div>

Now my question is, in this case How can I implement this?

Upvotes: 1

Views: 810

Answers (2)

fatih
fatih

Reputation: 353

You may try like this ..

<style type="text/css"> 
    li.selected {
        background-color: #f90;
    }
</style>

<script>
$('ul.DHeader03 li a').click(
function(e) {
    e.preventDefault(); // prevent the default action
    e.stopPropagation; // stop the click from bubbling
    $(this).closest('ul').find('.selected').removeClass('selected');
    $(this).parent().addClass('selected');
}); 
</script>

<ul class="DHeader03">
<div class="DHeader03MenuTop">
    <li><a href="http://www.example.com/?m=1">Home</a></li>
    <li><a href="http://www.example.com/?m=2">About</a></li>

</div>
<div class="DHeader03MenuBottom">
    <li><a href="http://www.example.com/?m=3">Test</a></li>
    <li><a href="http://www.example.com/?m=4">Contact</a></li>
</div>
</ul>

Upvotes: 0

wandarkaf
wandarkaf

Reputation: 1889

If the point is to create a menu with drop downs and hover,selected,link, etc. I may suggest that you use an unordered list. In example.

<ul>
  <li>
    <a href="www.something here">link</a>
  </li>
  <li>
    <a href="www.something here">link II</a>
  </li>
</ul>

then make a proper styling. I suggest you checkout this menu drop downs examples. http://lwis.net/free-css-drop-down-menu/ . nice css startup for what your looking for.

Upvotes: 1

Related Questions