I sottomenu di navigazione non vengono visualizzati.Il mio Javascript non funziona?

Question

Sono un principiante quindi non sono proprio sicuro di cosa sto facendo di sbagliato qui!

Ecco il mio jsfiddle: http://jsfiddle.net/alh3168/UwG7h.

Sto cercando di creare un semplice menu di navigazione a comparsa in cui i sottomenu scorrono a destra del menu di navigazione.Voglio che sia simile a questo: http://jsfiddle.net/ReuLr/6.Ho provato di tutto;è possibile creare questo CSS invece di Javascript?Vedi qualche errore nel resto del mio codice che impedisce il funzionamento della barra di navigazione a scorrimento?Grazie in anticipo!

Ecco il mio javascript, che ho appena copiato dal precedente jsfiddle:

$(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

Partendo dall'esempio che hai fornito, ho apportato le seguenti modifiche:

• Rimosso il h1 tag dal tuo HTML
• Metti il navigation'S style valore dell'attributo nel CSS
• Aggiunti alcuni CSS per gli elementi div.menu ul

Ecco un violino che include le modifiche apportate

Appunti:

• il codice JS non è stato modificato (è uguale al codice JS del tuo esempio).
• quando usi JSFiddle, non dimenticare di selezionare jQuery dall'elenco "Frameworks ed Estensioni" ;)

---

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

Avevo solo bisogno di chiamare il JavaScript correttamente!Ecco perché non funzionava a Dreamweaver.Grazie per il tuo aiuto!

<script type="text/javascript">
    $(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: 450
        });
    }).mouseout(function () {
        $(this).find('ul.second').stop(true, true).animate({
            width: "toggle"
        }, {
            queue: false,
            duration: 450
        });
    });
});

.

});