Menu
I know there are other topics on this subject, but none of them are noob friendly ;) I need to make a website for school, and I want to keep a li highlighted after I click it.
Here is what I've got:
<!DOCTYPE html>
<html>
<title> De Vakman Wiersema </title>
<head>
<script type="text/javascript">
<!--
//-->
</script>
<style>
body {
background-color: #F2EEE6;
}
a {
text-decoration:none;
color: #FFFFFF;
}
div.head {
width: 1100px;
height: 50px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
border: 1px solid black;
background-color: #F2EEE0;
}
div.underhead {
width: 110px;
height: 500px;
border: 1px solid black;
background-color: #F2EEE0;
}
div.background {
background-color: #7F7A76;
position: absolute;
width: 100%;
height: 50%;
top: 0px;
right: 0px;
left: 0px;
}
#img1 {
margin-left: 292px;
margin-top: 10px;
border: 1px solid black;
}
#cssmenu {
width: 1000px;
font-family: Helvetica;
color: #FFFFFF;
position: absolute;
}
#cssmenu ul {
list-style-type:none;
padding:10px;
overflow:hidden;
background-color:#98BF21;
margin-left: 292px;
border-radius: 4px 100px 4px 4px;
}
#cssmenu a,
#cssmenu a:link,{
display:block;
width:200px;
height: 50px;
border: 1px solid black;
background-color:#98BF21;
}
#cssmenu li {
float:left;
margin-left: 50px;
border-radius: 5px;
padding: 0px;
display: inline-block;
}
#cssmenu li a {
background: #98BF21;
display: block;
padding: 10px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
#cssmenu li a:hover {
background: #11A304;
}
div.page {
width: 990px;
height: 800px;
margin-left: auto;
margin-right: auto;
border: 1px solid black;
background: #F7F5F5;
border-radius: 5px;
box-shadow: 0px 0px 20px 3px #7F7979;
padding: 5px;
margin-top: 80px;
}
</style>
</head>
<body>
<div class="background">
<div class="logo">
<a href="http://goo.gl/maps/jScbt" target="_blank">
<img id="img1" src="images/logo.jpg" alt="Logo" height="150" width="220">
</a>
</div>
<div id='cssmenu'>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#producten">Producten</a></li>
<li><a href="#klussendienst">Klussendienst</a></li>
</ul>
</div>
<div class="page">
Text
</div>
</div>
</body>
</html>
(sorry for not using any of the "jsfiddle" or any of the other programs:-(
(P.S. Terms on the website are in Dutch)
629
asked Jul 31 '26 11:07
Without jQuery:
document.getElementById('cssmenu').onclick = function(e) {
e = e || window.event;
var t = e.srcElement || e.target;
while(t != this && t.nodeName != "LI") t = t.parentNode;
if( t.nodeName == "LI") {
t.style.backgroundColor = "#11A304";
}
};
You can use Jquery. It's a simple and fast and powerful library that allows you to do great things with little code (it's a javascript library). If you paste this in your page you can get what you want:
<script type="text/javascript">
$('li').click(function(){
$(this).css( 'background-color', 'yellow' );
});
</script>
EXPLANATION With $('identifier') you can bind an event to a specific element of a page...it can be an html tag, an id or a class. In this case we are binding the click to the li elements.
Once the click happens, the code inside the function(){} is executed. With the variable this we refer to the element just clicked. With the method .css (a method of the Jquery library) we change the property we desire.
It can be translated like: "Every time a click a li element, do the following: take the element just clicked and change its css: change its background color to yellow".
20
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
