Hi. I’m new to web design. I have a nav bar that changes when the window size is small (either on resize or on a smaller device). I’m having issues with the code though. I want it when the user hovers on the nav bar or clicks on it when it’s in the smaller window sized mode, the menu pops out from the side instead of from on top. I’ve managed to get it so when the user hovers over the menu bar, the menu bar text changes colour. So I’m pretty certain I need code in that block. I just don’t know how to do what I want or if it’s even possible with my current code. I think I might have to start all over from scratch. Anyway, here’s a snippet of my code. I can post more if needed.
<!-- just a snippet of my test.html file -->
<body>
<!-- clearfix is used to combat the zero-height -->
<!-- container problem for floated elements -->
<nav class="clearfix">
<ul class="clearfix">
<li><a href="#">Home</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Transfer Area</a></li>
<li><a href="#">Online Manual</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Sign in</a></li>
<li><a href="#">Contact</a></li>
</ul>
<a href="#" id="pull">Menu</a>
</nav>
</body>Here’s a snippet of my CSS file:
/* All the buttons are in a ul */
nav ul {
height: auto;
width: 40%;
float: left;
/* Set display to none to make the menu "hidden" by default */
// display: none;
/* Our attempt at getting to slide out from the side */
position: absolute;
left: -140px;
}
/* Settings for the text on the small nav bar */
nav a#pull {
display: block;
width: 100%;
/* We set absolute so the word "Menu" doesn't move when someone */
/* clicks the 3 bar button */
position: absolute;
}
/* Our three lined button. I don't understand this #pull stuff */
nav a#pull:after {
content:"";
background: url('/images/3_bar.png') no-repeat;
width: 30px;
height: 30px;
display: inline-block;
position: absolute;
right: 15px;
top: 10px;
}
/* Don't forget to change the colour of the three lined button */
/* on hover / active */
nav a#pull:hover::after, nav a#pull:active::after {
background: url('/images/3_bar_hover.png') no-repeat;
}
All I need to do is change the nav ul left: -149px to 0 inside the nav a#pull:hover::after stuff. If this code worked, it’d be perfect. But it doesn’t:
/* Don't forget to change the colour of the three lined button */
/* on hover / active */
nav a#pull:hover::after, nav a#pull:active::after {
background: url('/images/3_bar_hover.png') no-repeat;
nav ul {
left: 0;
}
}
Is what I want to do even possible or do I have to start all over and redesign my navigation bar differently? I followed a tutorial on how to build it. I was learning by modifying it. I’ve added to it quite a bit over the last few days. It’d suck to start all over again. I have a small amount of Javascript enabled for when they click on the nav bar. If what I’m trying to do can only be done in Javascript, I’m okay with that. I just don’t know how to do it. Thank you.