Menu css

Report · Feb 01, 2017

hi everyone

I would like to make a dynamic menu in which the buttons change colors when the mouse is on and keeps that color on the new page. How can we do this with a css

Bests regards

Report · Feb 01, 2017

Give the menu item, (the list item) a class of current and then define this to be whatever color you used for the hover -

html -

css -

li a:hover {

background-color; your-color-selection;

}

li .current {

background-color: same-as-you-used-above;

}

If you wish different colors for every item, give the li a class, and do the above for every menu item.

So the first css would be -

li .yourClassName a:hover {

the second -

li .yourClassName .current {

Report · Feb 01, 2017

thank you very mutch

Report · Feb 01, 2017

Just a thought.

The li .current css selector would have to be in the page head content for the relevant page, otherwise it would apply on every page.

Report · Feb 01, 2017

How to put it in the head

Report · Feb 01, 2017

O/k modified version with classes included -

html -

in your css file -

li .firstcolor1 a:hover {

background-color; your-color-selection;

}

Paste this just before the closing </head> on the actual page -

<style>

li .secondcolor1 {

background-color: same-as-you-used-above;

}

</style>

For each menu item, just increment the numbers used in the class.

Report · Feb 01, 2017

ok I understand

thank's verry mutch

Report · Feb 01, 2017

I have a slightly different way of making persistent page indicators on menus.

Persistent Page Indicator on Menus - http://alt-web.com/

Give each anchor a class name.

<a class="home" href="index.html">HOME</a> | <a class="about" href="about.html">ABOUT US</a> | <a class="products" href="products.html">PRODUCTS</a> | <a class="services" href="services.html">SERVICES</a>

On each page, apply the target class name to your <body> tag.

etc...

CSS:

body.home a.home, body.about a.about, body.products a.products, body.services a.services { /**your custom styles here**/ color: red; text-decoration: underline; background: yellow; }

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Feb 01, 2017

Thank's Nancy

that verry interesting solution

Report · Feb 01, 2017

And to add to Paula's and Nancy's solutions, here is another to make your head spin.

Markup:

<ul class="nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="services.html">Services</a></li>
<li><a href=".contact.html">Contact</a></li>
<li><a href="news.html">News</a></li>
</ul>

Styling:

nav li.active {
color: red;
text-decoration: underline;
background: yellow;
}

jQuery:

<script>
jQuery(document).ready(function($){
var url = window.location.href;
$('ul.nav a').map(function() {
$(this).parent().toggleClass('active', this.href == url || this.href == url.split("?")[0].split("#")[0]);
});
});
</script>

Note:

This solution is viable only if you already have jQuery loaded in your page.

How it works:

When the page loads, it highlights the 'Home' menu item. When the page is ready (document ready function), the script looks up the current URL of the document and compares that to the links of the menu items. If it finds a match, it removes the 'active' class from the 'Home' item and adds the 'active' class to the matched item.

This is a great solution when you use server side includes (SSI's) to add the menu items into a document.

Edit:

Also a great solution when using Dreamweaver's Template system (DWT)

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!

Report · Feb 01, 2017

Yes. The jquery toggleClass approach is a good one, too. I often use it on my own projects.

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator

Menu css

1 Correct answer