Grow your CSS skills. Land your dream job.

Navigation menu box shadow confusion

  • # April 25, 2013 at 1:57 pm

    @simpletwist

    Look we understand that you want to replicate the menu but you still haven’t explained yourself properly.

    Is it the style of the hover you can’t do?

    Is this supposed to be the look on mouse-down? [Which is 'active']

    Or is it that you want the individual link to look like that **only** when the user is on that page?

    Pictures don’t help that much. Please put some HTML & CSS in Codepen so we can help you better.

    # April 25, 2013 at 2:22 pm

    There

    [http://codepen.io/Krish1980/pen/mGfed](http://codepen.io/Krish1980/pen/mGfed “”)

    Goal achieved (although I bet this isn’t what’s being asked). When you create the contact page, give the ‘contact’ link an ‘active’ class.

    Now, what is it that you want to achieve?

    # April 25, 2013 at 3:57 pm

    @Krish1980

    This is exactly what I was looking for. What is missing is that when a link is clicked that the “white box with drop shadow” doesn’t move to the active state. Please let me know if this makes sense.

    *I’m new to this sort of thing, so forgive my ignorance. I’m trying to figure out what I did correctly and where I failed.

    Thank you for putting it in code. that is an amazing tool.

    # April 25, 2013 at 4:47 pm

    [Here...](http://codepen.io/anon/pen/bzFaA “”) with slight tweak for active hover state

    # April 25, 2013 at 5:07 pm

    And [here](http://codepen.io/Podders/pen/ksEce “Here”) with a little JS to handle the “active” class on clicks

    # April 25, 2013 at 6:03 pm

    Perfect! Many thanks.

    # April 25, 2013 at 10:15 pm

    > What is missing is that when a link is clicked that the “white box with drop shadow” doesn’t move to the active state.

    Actually, when you are creating separate pages, you don’t even need js. Simply give the link an active class. For e.g, on the page art.html, give the ‘art’ link an active class; on the page contact.html, give the ‘contact’ link an active class, and so on..

    # April 27, 2013 at 10:54 am

    At some point I plan on integrating into wordpress. In the mean time, how would i add the js into static html for practice?

    * Are the dropdown in css too (in url provided)?

    # April 28, 2013 at 6:54 am

    > In the mean time, how would i add the js into static html for practice?

    You don’t need js if you are creating separate pages. As said earlier

    “_Simply give the link an active class. For e.g, on the page art.html, give the ‘art’ link an active class; on the page contact.html, give the ‘contact’ link an active class, and so on.._”

    …It’s easy . However, if you insist on the js solution, you’d do something like this


    Add latest js library


    add the code mentioned in Podders' Pen

    Add that in the head tag. (for some reason I am not able to paste the entire code within the code blocks)

    > Are the dropdown in css too

    Yes, a dropdown can be created using pure css too(works in IE8 +, I think). Enter a google search for css3 drop down menus and you’ll get hundreds of tutorials. There are also free css3 and js dropdown menus for download.

    # April 28, 2013 at 9:17 am

    I think the JS solution is better for the long run. When you are referring to the latest JS library you mean something like;

    # April 28, 2013 at 9:17 am

    # April 28, 2013 at 9:18 am

    [js library?]( “js link”)

    # April 28, 2013 at 9:20 am

    * I can’t seem to paste the code to the latest Google library. Seems to disappear when I add as a link or as code.

Viewing 14 posts - 16 through 29 (of 29 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".