I've successfully implemented a navigation bar that changes the content in the body when each link is selected. Utilizing AJAX for dynamic content changing, I can change the color of menu items on hover but am facing issues with changing the color upon selection.
Additionally, I'd like to change the background image as long as the menu item is clicked, then reset it to its original state.
My code is structured as follows:
HTML:
<div id="menuwrapper">
<ul>
<li>
<a href="#"><img src="images/home.png"></a>
</li>
<li></li>
</ul>
</div>
CSS:
div#menuwrapper ul li a:active {
margin-top: -17px;
margin-left: 0;
width: 26px;
color: red;
height: 56px;
background-color: #000;
}
After adding a class to li, the CSS was modified as follows:
div#menuwrapper li.selected a {
margin-top: -17px;
margin-left: 0;
width: 26px;
color: red;
height: 56px;
background-color: #000;
}
However, no changes were reflected upon implementation.
Please review my edited code and provide any suggestions for improvement:
/* Define the body style */
body {
font-family:Arial;
font-size:12px;
}
/* Remove margins, padding, and list styles from UL and LI elements */
#menuwrapper ul, #menuwrapper ul li{
margin:0;
padding:0;
list-style:none;
}
/* Apply background color, border, and width properties */
#menuwrapper ul li{
background-color:#333333;
border-bottom:solid 1px #222222;
width:56px;
height:56px;
margin-left:-240px;
cursor:pointer;
}
/* Apply background hover color effect */
#menuwrapper ul li:hover{
background-color:#4abbed;
position:relative;
}
/* Apply link styling */
#menuwrapper ul li a{
padding:5px 15px;
color:#ffffff;
display:inline-block;
text-decoration:none;
}
div#menuwrapper ul li a:active {
margin-top: -17px;
margin-left: 0;
width: 26px;
color: red;
height: 56px;
background-color: #000;
}
div#menuwrapper li.selected a {
margin-top: -17px;
margin-left: 0;
width: 26px;
color: red;
height: 56px;
background-color: #000;
}
.nav a {
text-align:center;
float: left;
text-decoration: none;
color: #fff;
padding: 10px;
background: orange;
margin: 0 10px 10px 0;
}
.menu:target
{
background: red;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<div id="header">
<div id="menuwrapper">
<ul class="menu">
<li style="height:5px;background-color:#4abbed;border-bottom:solid 1px #4abbed;">
</li>
<li>
<a href="#" id="menu1" class="menu"><img src="images/home.png"/>
</a>
</li>
<li>
<a href="#" id="menu2" class="menu"><img src="images/Description.png"/>
</a>
</li>
<li>
<a href="#" id="menu3" class="menu" onClick="load('content', 'page2.php');">
<img src="images/Technical.png"/>
</a>
</li>
<li>
<a href="#" id="menu4" class="menu" onClick="load('content', 'page3.php');">
<img src="images/Download.png"/></a>
</li>
</ul>
</div>
</div>