CODEWITHSUNDEEP
htmlcss
Hank
Hank

Reputation: 2616

Trying to display a hidden nav element when hovering over link via css

I have an icon on the top left as shown in the image below:

When I hover over it I would like the side menu (unhidden at the moment) to display, by sliding out and then back in again once off hover, however I'm having trouble getting the css to work.

The problem piece is:
#nuke_logo > a:hover:nth-child(1) + #nukeSideMenu, #nukeSideMenu:Hover{}

I've even tried changing something simple like the background color and it's still not working. Must be the syntax, but, I've tried multiple things without success. Can someone see the issue?!

enter image description here

html snippet:

<div id="nuke_logo" class="col-xs-12 col-sm-2">
    <a id="nuke_icon" href="/">
        <img src="/Images/Nuclei/nuclei_md.png">
    </a>
    <a class="" href="/">Nuclei</a>
    <nav id="nukeSideMenu" role="navigation">
        <div>
            <ul id="side-menu" class="nav">
                <li>
                    <a id="lm_CSM" class="">
                        <img alt="CSM" src="/Images/LauncherButtons/CSM_Launcher.png">
                        <span class="menu-title">Customer Services</span>
                    </a>
                </li>
                <li>
                    <a id="lm_ADMIN" class="">
                        <img alt="ADMIN" src="/Images/LauncherButtons/ADMIN_Launcher.png">
                        <span class="menu-title">Administration</span>
                    </a>
                </li>
            </ul>
        </div>
    </nav>
</div>

css snippet:

<style>
    #nuke_logo {
        position:relative;
        background:#dbdbdb;
    }
    #nuke_logo a:nth-child(1) {
        text-decoration: none;
    }
    #nuke_logo > a:nth-child(1) img {
        width: 32px;
        height: 32px;
        vertical-align:top;
        margin: 10px 5px 1px 0;
        background:#dbdbdb;

        -webkit-transition: 
            -webkit-transform 0.4s ease-in-out;
        -moz-transition:  
            -moz-transform 0.4s ease-in-out;
        -o-transition: 
            -o-transform 0.4s ease-in-out; 
        -ms-transition: 
            -ms-transform 0.4s ease-in-out; 
        transition: 
            transform 0.4s ease-in-out;
    }

    #nuke_logo > a:hover:nth-child(1) img {

        text-decoration: none;
        -webkit-transform: scale(1.2);
        -moz-transform: scale(1.2);
        -o-transform: scale(1.2);
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }

    #nuke_logo a:nth-child(2) {
        color: #525252;
        font-family: "Righteous",cursive;
        display: inline;
        font-size: 20px;
        line-height: 50px;
    }
    #nuke_logo a:nth-child(2):hover {
        text-decoration: none;
    }

    #nuke_logo > a:hover:nth-child(1) + #nukeSideMenu, #nukeSideMenu:Hover {
        width: 55px;
        overflow: auto;
    }

    #nukeSideMenu {
        display: block;
        position: absolute;
        width: 0px;
        overflow: hidden;
        z-index: 1;
        top: 50px;
        left: 0;
        transition-timing-function: ease;
        -moz-transition-timing-function: ease;
        -webkit-transition-timing-function: ease;
        -o-transition-timing-function: ease;
        transition-property: width;
        -moz-transition-property: width;
        -webkit-transition-property: width;
        -o-transition-property: width;
        transition-duration: 2s;
        -moz-transition-duration: 2s;
        -webkit-transition-duration: 2s;
        -o-transition-duration: 2s;
    }
</style>

Upvotes: 1

Views: 77

Answers (3)

brianespinosa
brianespinosa

Reputation: 2408

Since you want both your icon and your "Nuclei" label to link to the root of your application, I would recommend that you combine those two items inside one anchor link. That way you can use the hover effect on that link to open your menu below with the CSS sibling selector.

// Change this:
<a id="nuke_icon" href="/">
    <img src="/Images/Nuclei/nuclei_md.png">
</a>
<a class="" href="/">Nuclei</a>
<nav id="nukeSideMenu" role="navigation">...

// To this:
<a id="nuke_icon" href="/">
  <img src="/Images/Nuclei/nuclei_md.png" />
  <h1>Nuclei</h1>
</a>
<nav id="nukeSideMenu" role="navigation">...

Now we will be able to use the hover on #nuke_icon to make the menu appear.

// Add this to your styles for #nukeSideMenu 
#nukeSideMenu {
  transform: translateX(-100%);
}

// And create this new rule for the hover on the icon with the sibling selector
#nuke_icon:hover + #nukeSideMenu {
  transform: translateX(0);
}

Upvotes: 1

Joey Breithaupt
Joey Breithaupt

Reputation: 95

If you're hoping to use just CSS then I believe adding this to your stylesheet should do the trick.

#nuke_logo:hover #nukeSideMenu {
  width: 55px;
}

Upvotes: -1

Pixelomo
Pixelomo

Reputation: 6737

I've created a working fiddle based on your code

https://jsfiddle.net/y7vufxh8/

instead of #nuke_logo > a:hover:nth-child(1) you just need #nuke_logo a:hover

also changing width on hover looks bad, use translate3d for nice smooth animations

 #nuke_logo a:hover + #nukeSideMenu, #nukeSideMenu:hover {
    transform: translate3d(0,0,0);
    overflow: auto;
}

#nukeSideMenu {
    display: block;
    position: absolute;
    width: 50%;
    overflow: hidden;
    z-index: 1;
    top: 50px;
    left: 0;
    transform: translate3d(-50%,0,0);
    transition: 1s ease-in-out;
}

Upvotes: 1

Related Questions