Navigations-Untermenüs werden nicht ausgeblendet.Funktioniert mein Javascript nicht?

Question

Ich bin ein Neuling, daher bin ich mir nicht wirklich sicher, was ich hier falsch mache!

Hier ist meine jsfiddle: http://jsfiddle.net/alh3168/UwG7h.

Ich versuche, ein einfaches Flyout-Navigationsmenü zu erstellen, bei dem die Untermenüs rechts vom Navigationsmenü ausgeblendet werden.Ich möchte, dass es so aussieht: http://jsfiddle.net/ReuLr/6.Ich habe alles versucht;Ist es möglich, dieses CSS anstelle von Javascript zu erstellen?Sehen Sie im Rest meines Codes Fehler, die verhindern, dass die ausziehbare Navigationsleiste funktioniert?Dank im Voraus!

Hier ist mein Javascript, das ich gerade aus der vorherigen jsfiddle kopiert habe:

$(document).ready(function () {
    var secs1 = $('ul.first > li');
    secs1.hover(
    function () {
        $(this).find('ul.second').animate({
            width: 'toggle'
        }, 500);
    },
    function () {
        $(this).find('ul.second').animate({
            width: 'toggle'
        }, 250);
    });
});

Answer 1

Ausgehend von dem von Ihnen bereitgestellten Beispiel habe ich die folgenden Änderungen vorgenommen:

• Entfernt die h1 Tag aus Ihrem HTML
• Lege das navigation'S style Attributwert in CSS
• Etwas CSS für die Elemente hinzugefügt div.menu ul

Hier ist eine Fiddle inklusive der vorgenommenen Änderungen

Anmerkungen:

• Der JS-Code wurde nicht geändert (er ist derselbe wie der JS-Code Ihres Beispiels).
• Vergessen Sie bei der Verwendung von JSFiddle nicht, jQuery aus der Liste „Frameworks und Erweiterungen“ auszuwählen ;)

---

CSS:

#navigation {
    background-color:#FFF;
    height:100%;
    width:250px;
    float:left;
}

/********************/
/* MENU            */
/*******************/
 div.menu {
    width: 200px;
    float: left;
    position: relative;
}
/* ADDITIONAL CSS */
 div.menu ul {
    list-style-type: none;
    margin-top: 0;
    padding-left: 0;
}
div.menu ul li {
    margin-bottom: 1px;
}
div.menu ul.first li a {
    width: 190px;
    height: 22px;
    background-color: #00293E;
    color: #ffffff;
    text-decoration: none;
    display: block;
    padding: 7px 10px 0 0;
    text-align: right;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
}
div.menu ul.first li a:hover {
    background-color: #B2CC7F;
    color: #00293E;
}
div.menu ul.second {
    position: absolute;
    left: 200px;
    top: 0;
    z-index: 10;
    display: none;
    width: 190px;
}
div.menu ul.second:hover {
    display: block;
}
div.menu ul.second li a {
    width: 190px;
    height: 22px;
    background-color: #B2CC7F;
    color: #00293E;
    text-decoration: none;
    display: block;
    padding: 7px 10px 0 0;
    text-align: right;
    font-weight: bold;
    cursor: pointer;
    cursor: hand;
}
div.menu ul.second li a:hover {
    background-color: #597A5E;
    color: #ffffff;
}

HTML:

<div id="navigation">
    <header id="header-main">
        <img src="Logos/headerlogo.jpg" width="215" height="80" longdesc="Logos/headerlogo.jpg">
        <hr size=1 width=175 align=left style=margin-left:35px>
        <div class="menu">
            <ul class="first">
                <li> <a href="" title="" runat="server">Home</a>
                </li>
                <li> <a href="" title="" runat="server">Blog</a>

                    <ul class="second">
                        <li><a href="" title="" runat="server">Sub category 1</a>
                        </li>
                        <li><a href="" title="" runat="server">Sub category 2</a>
                        </li>
                        <li><a href="" title="" runat="server">Sub category 3</a>
                        </li>
                        <li><a href="" title="" runat="server">Sub category 4</a>
                        </li>
                        <li><a href="" title="" runat="server">Sub category 5</a>
                        </li>
                        <li><a href="" title="" runat="server">Sub category 6</a>
                        </li>
                    </ul>
                </li>
                <li> <a href="" title="" runat="server">Instagram</a>
                </li>
                <li><a href="" title="" runat="server">About</a>
                </li>
                <li><a href="" title="" runat="server">Store</a>

                    <ul class="second">
                        <li><a href="" title="" runat="server">Etsy</a>
                        </li>
                        <li><a href="" title="" runat="server">Society6</a>
                        </li>
                    </ul>
                </li>
                <li><a href="" title="" runat="server">Portfolio</a>

                    <ul class="second">
                        <li><a href="" title="" runat="server">Capstone</a>
                        </li>
                        <li><a href="" title="" runat="server">Visual Communications</a>
                        </li>
                        <li><a href="" title="" runat="server">Illustration</a>
                        </li>
                        <li><a href="" title="" runat="server">Photography</a>
                        </li>
                        <li><a href="" title="" runat="server">Painting</a>
                        </li>
                        <li><a href="" title="" runat="server">Printmaking</a>
                        </li>
                        <li><a href="" title="" runat="server">Fibers</a>
                        </li>
                    </ul>
                </li>
                <li><a href="" title="" runat="server">Contact</a>

                    <ul class="second">
                        <li><a href="" title="" runat="server">E-mail</a>
                        </li>
                        <li><a href="" title="" runat="server">Linked In</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <hr size=1 width=175 align=left style=margin-left:35px>
        <ul id="search-list">
            <form method="get" action="http://www.andreahock.com">
                <table cellpadding="0px" ; cellspacing="0px">
                    <tr>
                        <td style="border-style:solid none solid solid; border-color:#C93;border-width:1px;">
                            <input type="text" name="zoom_query" placeholder="  search the blog" style="width:150px; font-family: Neou-Bold; src: url('Neou-Bold.otf'); font-size:8px;letter-spacing:1px ;border:#FFF; height:17px; padding:0px 3px; position:relative;">
                        </td>
                        <td style="border-style:solid; border-left:#FFF;border-color:#C96;border-width:1px;">
                            <input type="submit" value="" style="border-style: none; border-left:#FFF ;background: url('jpegs/magnifyingglass.jpg') no-repeat; width: 20 px; height:23 px;">
                        </td>
                    </tr>
                </table>
            </form>
        </ul>
    </header>
</div>
<div id="content">Content goes here</div>
<div id="footer" style="background-color:#DABC69; font-family: Neou-Bold; src: url('Neou-Bold.otf'); font-size:10px;letter-spacing:1px; clear:both; text-align:center;">All designs belong to Andrea Hock</div>
</div>

JS:

$(document).ready(function () {
    $('ul ul').each(function () {
        $(this).parent('li').mouseover(function () {
            $(this).find('ul.second').stop(true, true).animate({
                width: "toggle"
            }, {
                queue: false,
                duration: 250
            });
        }).mouseout(function () {
            $(this).find('ul.second').stop(true, true).animate({
                width: "toggle"
            }, {
                queue: false,
                duration: 250
            });
        });
    });
});

Answer 2

Ich musste nur das Javascript richtig anrufen!Deshalb arbeitete es nicht in Dreamweaver.Vielen Dank für Ihre Hilfe!

generasacodicetagpre.

});