CODEWITHSUNDEEP
jqueryhtmlcss
Macksen
Macksen

Reputation: 81

I can't get a menu dropdown fade effect to work. (Beginner)

I am relatively new to coding websites and I am currently creating an online portfolio for my self, however I am stuck with a dropdown menu fade effect which I can't seem to fix in either Jquery or CSS even tho I have tried different tutorials. (Note that I am a beginner)

So my question to you guys is, what do I need to add for a fade in and out to work properly on my submenu to "Portfolio"?

HTML

<nav id="navbar">
    <div id="navbarcontent">
        <ul>
            <a href="index.html">
                <li class="hem">
                    <p>Hem<p>
                </li>
            </a>

            <a href="#">
                <li>
                    Portfolio
                    <ul>

                        <a href="illustrator.html">
                            <li>
                                Illustrator
                            </li>
                        </a>

                        <a href="photoshop.html">
                            <li>
                                Photoshop
                            </li>
                        </a>
                        <a href="illustrator.html">
                            <li>
                                InDesign
                            </li>
                        </a>
                    </ul>   

                </li>

            </a>

CSS

#navbar #navbarcontent ul {
    float:left;
    margin: 0px 0px 4px -32px;
    width:600px;
    padding-top:29px;
}
#navbar #navbarcontent ul li {
    float:left;
    padding: 5px 10px;
}
#navbar #navbarcontent ul a {
    color:white;
    font-weight:bold;
}
#navbar #navbarcontent ul ul {
    display:none;
}
#navbar #navbarcontent ul li.active {
    position: relative;
    float:left;
    cursor:pointer;
}
#navbar #navbarcontent ul li.active:hover {
    background-color:#43b1ff;
}
#navbar #navbarcontent ul li.active > ul {
    display:block;
    position: absolute;
    top:32px;
    left:0px;
    margin-left:0px;
    width:100%;
    padding-top:0px;
}

JQUERY

   $("#navbar ul li").hover(function() {
            $(this).addClass("active");
        }, function() {
            $(this).removeClass("active");
        });

Upvotes: 1

Views: 1176

Answers (2)

Josh Powell
Josh Powell

Reputation: 6297

I will give you the basics for both ways.

First way is with css,

ul#mainNav > li {
    float: left;
    width: 25%;
    text-align: center;
    line-height: 70px;
    display: block;
    -webkit-transition: all 1s ease;
}

ul#mainNav > li:hover {
    background: rgba(0, 0, 0, 0.4);
}

.subNav {
    -webkit-transition: opacity 1s ease;
}

ul#mainNav li:hover .subNav {
    opacity: 1;
}

This will allow the subNav to fade in with opacity. (not the best way with fading on subNavs) (JSFIDDLE CSS)

Here is the jQuery approach,

$('ul#mainNav li').on('click', function() {
    $(this).find('.subNav').fadeToggle(1000);
});

(This one is clean and simple and here is the JSFIDDLE jQuery)

(jQuery hover state)

$('ul#mainNav li').on('mouseenter', function() {
    $(this).find('.subNav').fadeIn(1000);
}).on('mouseleave', function() {
    $(this).find('.subNav').fadeOut(1000);
});

(JSFIDDLE)

Upvotes: 2

Ian
Ian

Reputation: 6134

Instead of from display:hidden to display:block, go from opacity:0 to opacity:1. Also, add a transition on the ul with transition:opacity 0.5s. You can adjust the time to change the duration. Keep in mind that you will need some browser prefixes for support, or you can use this library: http://leaverou.github.io/prefixfree/.

Upvotes: 0

Related Questions