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

Question

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?

wandarkaf · Accepted Answer · 2012-04-26 07:49:27Z

1

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.

answered Apr 26, 2012 at 7:49

wandarkaf

1,92720 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

HeLLBoY Over a year ago

I'm not talking about sub menu!

fatih · Accepted Answer · 2022-05-04 20:58:46Z

0

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>

edited May 4, 2022 at 20:58

answered Jun 13, 2014 at 10:23

fatih

3539 silver badges17 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related