我是新手,所以我不确定我在这里做错了什么!
这是我的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);
});
});
答案 0 :(得分:0)
从您提供的示例开始,我做了以下修改:
h1
标记
navigation
' style
属性值放入CSS div.menu ul
Here's a Fiddle including the modifications made
注意:
<强> 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
});
});
});
});