Help with a navigation bar.

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.

Never mind. I figured out how to do what I wanted using jQuery. Looking back, I don’t think it’s possible to do what I want to do with just CSS. If things where ordered in a different way, perhaps. But the way I wrote everything, I just don’t think it’s possible.

Well, not really sure, but, the way that CSS works is inline… Which means that your code:
nav a#pull:hover::after, nav a#pull:active::after {
background: url(’/images/3_bar_hover.png’) no-repeat;
nav ul {
left: 0;
}
}
tells it to look for :
NAV
A
{ start of a list of commands…
NAV
UL
} end of list of commands…
BUT, in your navigation menu area, you do not have two NAV’s…
So, it would never execute the LEFT command. It is looking for something like:
NAV
A
NAV
UL
Which is NOT in your navagation menu display. I did not test this, but, I think you just need to remove
the added NAV and sort it out correctly. Something like this might work for you:
[php]
nav a#pull:hover::after, nav a#pull:active::after {
background: url(’/images/3_bar_hover.png’) no-repeat;
left: 0;
}
[/php]
This may not do exactly what you want, since CSS is a top-down system. If you want the entire UL to move
to the left, you have to code that under the UL area, not the ANCHOR area. Let us know if this helps at all…
If not, please create a short one page file to test just the menus with. Then, post it. Place the CSS on your
test page inline, meaning not on a separate page and post it as one small file and indicate where it is not
working for you. Either way, hope that helps…

Thanks for the reply. I’m sorry I didn’t reply until now. I ended up doing it with jQuery (a library written in Javascript I believe). I also want to say I tried your method and it did NOT work. It moved the wrong stuff to the left. I have changed it a little bit. The code can be seen here, at my site (keep in mind, all I have right now is the navigation bar). http://www.JetBBS.com/test2.html The CSS is located at http://www.JetBBS.com/css/style.css and the jQuery / Javascript is located at http://www.JetBBS.com/js/click.js

It took me a while, but I tried making it so when it was on a smaller screen, it’d look different. If you’re on a laptop / desktop, try resizing the window a little bit. When it gets down to 840px or less, it should change. Once the navigation bar changes, you can click it. Still got a long ways to go. I was thinking for the forums, I could write my own code, but now I’m thinking it might be best just to buy some sort of forum, like vBulletin. Just a thought.

Great! Always nice to hear a problem is solved…

It can be done in just CSS, but, would take some time to test it… Glad you found a solution.
I will mark this problem solved.

See you in the bitstream… (When you have another new problem…)

Thanks! I was thinking the problem couldn’t of been solved because of what you was saying, how CSS was in-line. I was in an element that was further down the line and I was trying to modify a property to an element that came earlier on. I was thinking that’s why I couldn’t do what I wanted to do. Essentially, I needed to modify nav’s left property after they clicked on nav a. I don’t think I can go backwards like that. Thanks for helping though, it’s real nice to find people who are willing to help for free with this stuff. It can be confusing at first! I hope what I said wasn’t too confusing, I’m still trying to learn all the terminology!

No problem! That is why we are here. To help other enjoy PHP programming and other languages, too!

By the way, there are thousands of free CSS menu systems around on the net. Here are a couple that you
might find interesting. Just in case you see one you like… If you want to see others, just search Google
for something like “CSS simple menus”…

http://www.thecssninja.com/css/css-tree-menu
http://www.htmldog.com/articles/suckerfish/dropdowns/
http://purecss.io/menus/
http://cssmenumaker.com/menu/simple-responsive-menu

There are so many different ways to handle CSS menus. Some are easy, some are tricky.
Each programmer likes one way as their default. I have used several different depending on the site’s
needs. Some sites need just a simple “flat” looking standard menu, other fancy buttons with floating
sub-menus. Depends on your layout and needs.

Well, just more for you to think about! Good luck with the rest of your project!

Sponsor our Newsletter | Privacy Policy | Terms of Service