导航子菜单不会滑出。我的javascript无法正常工作吗?

时间:2014-02-26 02:35:28

标签: jquery slider navbar

我是新手,所以我不确定我在这里做错了什么!

这是我的jsfiddle:http://jsfiddle.net/alh3168/UwG7h

我正在尝试制作一个简单的飞出导航菜单,其中子菜单滑出导航菜单的右侧。我希望它与此类似:http://jsfiddle.net/ReuLr/6。我已经尝试了一切;是否有可能使这个CSS而不是JavaScript?您是否看到我的其他代码中的任何错误阻止了滑出导航栏的工作?提前谢谢!

这是我的javascript,我刚刚从之前的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);
    });
});

2 个答案:

答案 0 :(得分:0)

从您提供的示例开始,我做了以下修改:

  • 从HTML
  • 中删除了h1标记
  • navigation' style属性值放入CSS
  • 为元素div.menu ul
  • 添加了一些CSS

Here's a Fiddle including the modifications made

注意:

  • JS代码未被修改(它与您的示例的JS代码相同)。
  • 使用JSFiddle时,不要忘记从" Frameworks and Extensions"中选择jQuery。 list;)

<强> 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
            });
        });
    });
});

答案 1 :(得分:0)

我只需要正确调用javascript!这就是为什么它不能在Dreamweaver中工作。谢谢你的帮助!

<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
        });
    });
});

});