CODEWITHSUNDEEP
jquerymenuhover
user1750369
user1750369

Reputation:

Problems figuring out my jQuery menu

I am trying to code a jQuery hover menu from scratch as I am learning jQuery right now. I have the basics of a hover menu figured out, but I cannot seem to position my submenus correctly and they break my entire menu. The default.css stylesheet just has * { padding: 0; margin: 0 } in it.

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="css/default.css" />

    <script type="text/javascript" src="jQuery/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            $('.submenu').hide();
            $('.dropdown li').hover(function() {
                $('.submenu').show();
            }, function() {
                $('.submenu').hide();
            });
        });

    </script>

    <style type="text/css">

        #menu {
            width: 1000px;

            margin:auto;
            position: relative;

            text-align: center;
            text-transform: uppercase;
        }

        .mnLinks {
            padding: 0;
            margin: 0;

            display: inline;
            position: relative;
        }

        .mnLinks a {
            width: 200px;

            padding: 10px 0;
            margin: 0;
            float: left;                

            display: inline-block;
            color: #ffffff;
            background: #333337;
            text-decoration: none;
        }

.submenu li a {
            width: 200px;

            position: relative;
            top:100px;

        }
    </style>

</head>

<body>

<div id="menu">

    <ul class="dropdown">

        <li class="mnLinks"><a href="#" id="lnk01">Link #01</a></li>

            <ul class="submenu">

                <li><a href="#">SubLink#01</a></li>

                <li><a href="#">SubLink#02</a></li>

                <li><a href="#">SubLink#03</a></li>

            </ul>

        <li class="mnLinks"><a href="#">Link #02</a></li>

        <li class="mnLinks"><a href="#">Link #03</a></li>

            <ul class="submenu">

                <li><a href="#">SubLink#04</a></li>

                <li><a href="#">SubLink#05</a></li>

                <li><a href="#">SubLink#06</a></li>

            </ul>

        <li class="mnLinks"><a href="#">Link #04</a></li>

        <li class="mnLinks"><a href="#">Link #05</a></li>

    </ul>

</div>

</body>

</html>

Upvotes: 0

Views: 170

Answers (2)

apaul
apaul

Reputation: 16170

Try this:

Working Example

HTML
Nest <ul class="submenu"> within <li class="mnLinks">

<div id="menu">
    <ul class="dropdown">
        <li class="mnLinks"><a href="#" id="lnk01">Link #01</a>
            <ul class="submenu">
                <li><a href="#">SubLink#01</a></li>
                <li><a href="#">SubLink#02</a></li>
                <li><a href="#">SubLink#03</a></li>
            </ul>
        </li>
        <li class="mnLinks"><a href="#">Link #02</a></li>
        <li class="mnLinks"><a href="#">Link #03</a>

            <ul class="submenu">
                <li><a href="#">SubLink#04</a></li>
                <li><a href="#">SubLink#05</a></li>
                <li><a href="#">SubLink#06</a></li>
            </ul>
        </li>
        <li class="mnLinks"><a href="#">Link #04</a></li>
        <li class="mnLinks"><a href="#">Link #05</a></li>
    </ul>
</div>

CSS
A lot of changes here, mostly to correct inherited style issues.

#menu {
    width: 1000px;
    text-transform: uppercase;
    text-align:center;
}
ul, li {
    list-style:none;
    text-decoration:none;
}
.dropdown {
    width: 1000px;
    padding: 0;
    margin: 0;
}
.mnLinks {
    width: 200px;
    padding: 10px 0;
    margin: 0;
    display: inline-block;
    float: left;
    color: #ffffff;
    background: #333337;
    text-decoration: none;
}
.mnLinks a {
    color: #ffffff;
    text-decoration: none;
    padding: 10px 0;
}
.submenu {
    position:relative;
    top:10px;
}
.submenu li a {
    display:block;
    float:none;
}

JS
Changed the way that the submenus are selected.

$(document).ready(function () {
    $('.submenu').hide();
    $('.dropdown li').hover(function () {
        $(this).children('.submenu').show();
    }, function () {
        $(this).children('.submenu').hide();
    });
});

API Documentation for .children()

Upvotes: 2

UIlrvnd
UIlrvnd

Reputation: 786

Hope this works (though you might want to rework your css anyway):

<!DOCTYPE html>

<html>

<head>

    <link rel="stylesheet" type="text/css" href="css/default.css" />

    <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function() {
            $('.submenu').hide();
            $('.dropdown li').hover(function() {
                $(this).children('.submenu').show();
            }, function() {
                $(this).children('.submenu').hide();//Show and hide only child elements
            });
        });

    </script>

    <style type="text/css">

        #menu {
            width: 1000px;

            margin:auto;
            position: relative;

            text-align: center;
            text-transform: uppercase;
        }

        .mnLinks {
            padding: 0;
            margin: 0;

            display: inline;
            position: relative;
        }

        .mnLinks a {
            width: 200px;

            padding: 10px 0;
            margin: 0;
            float: left;                

            display: inline-block;
            color: #ffffff;
            background: #333337;
            text-decoration: none;
        }

.submenu li a {
            width: 200px;

            position: relative;
            /*top:100px; Not needed since it pushes items down...*/

    }
ul
{
list-style-type:none;
margin:0;
padding:0;
}
.dropdown li
{
float:left;
}
.mnLinks li
{
float:none;
}
    </style>

</head>

<body>

<div id="menu">

    <ul class="dropdown">

        <li class="mnLinks"><a href="#" id="lnk01">Link #01</a>

            <ul class="submenu">

                <li><a href="#">SubLink#01</a></li>

                <li><a href="#">SubLink#02</a></li>

                <li><a href="#">SubLink#03</a></li>

            </ul>
            </li><!--As stated in comment above.-->

        <li class="mnLinks"><a href="#">Link #02</a></li>

        <li class="mnLinks"><a href="#">Link #03</a>

            <ul class="submenu">

                <li><a href="#">SubLink#04</a></li>

                <li><a href="#">SubLink#05</a></li>

                <li><a href="#">SubLink#06</a></li>

            </ul>
            </li>

        <li class="mnLinks"><a href="#">Link #04</a></li>

        <li class="mnLinks"><a href="#">Link #05</a></li>

    </ul>

</div>

</body>

</html>

Fiddle

Upvotes: 2

Related Questions