Andreas De Rudder Posted March 1, 2016 Share Posted March 1, 2016 Hello, I would like to give the active item in the navigation bar an other color. Someone told me that I have to do it with JavaScript. Could someone give me an exemple of how I have to do it? I know nothing about JavaScript, so maybe you can give a clear exemple? This is the css: #menu ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #111;}#menu li { float: left;}#menu li a { display: block; color: white; text-align: center; padding: 7px 7px; text-decoration: none; font-size: 90%; }#menu a:hover { background-color: #808080;} And this is the menu list: <div id="menu"> <ul> <li><a href="index.html">Home</a></li> <li><a href="santonino.html">Santo Niño</a></li> <li><a href="activities.html">Activities</a></li> <li><a href="program.html">Program</a></li> <li><a href="newsletter.html">Newsletter</a></li> <li><a href="adresses.html">Adresses and Accessibility</a></li> <li><a href="announcements.html">Announcements</a></li> <li><a href="contact.html">Contact</a></li></ul> </div> Thank you for helping me! Link to comment Share on other sites More sharing options...
dsonesuk Posted March 1, 2016 Share Posted March 1, 2016 How is this menu added? Manually or dynamically using server side code such as php. Link to comment Share on other sites More sharing options...
Andreas De Rudder Posted March 1, 2016 Author Share Posted March 1, 2016 I don't understand exactly what you mean, my knowledge of webdesign is still a bit basic... But I don't have used php, it is an html document. The css is in the head of the page and the menu in the body. The website is www.msngent.be Link to comment Share on other sites More sharing options...
dsonesuk Posted March 1, 2016 Share Posted March 1, 2016 So you basically manually create, then copy and paste the same menu in each html page. In that case all you have to do after copy paste in each page, add a active class to menu link that matches current url, then style it as required for that active class. Link to comment Share on other sites More sharing options...
Chikwado Posted March 1, 2016 Share Posted March 1, 2016 Even css can give better result try a:visited { background-color:red; Link to comment Share on other sites More sharing options...
dsonesuk Posted March 1, 2016 Share Posted March 1, 2016 That is as it suggests for a visited link, and not for current ACTIVE link styling. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now