我正在尝试创建一个向下滑动的下拉框,并在底部图像向内滑动时保留底部图像。我一直在努力寻找专门用于此的脚本,但我找不到任何脚本。也许有人可以给我一个良好的开端或指针。或者有没有人有我可以解决的脚本?
这是我的目标:创建一个向下滑动菜单,在点击时向下和向下滑动,但保留此外观。
答案 0 :(得分:5)
以下是您使用jQuery描述的简单内容:http://jsfiddle.net/t9hq9/19/
你可以用你的底部图像替换我的#bottom
,我的是用边框半径的css制作的。
HTML:
<div id="content">CONTENT</div>
<div id="bottom"></div>
CSS:
#content {
width: 400px;
border-left: 10px solid #FA802F;
border-right: 10px solid #FA802F;
text-align: center;
padding: 100px 0px 100px 0px;
display: none;
}
#bottom {
width: 420px;
height: 100px;
background-color: #FA802F;
-webkit-border-bottom-left-radius: 50px;
-moz-border-bottom-left-radius: 50px;
border-bottom-left-radius: 100px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-bottom-right-radius: 50px;
border-bottom-right-radius: 100px;
}
JS:
$('#bottom').toggle(
function() {
$('#content').slideDown();
},
function() {
$('#content').slideUp();
}
);
答案 1 :(得分:0)
您可以将底部的圆角部分剪切为图像并尝试以下内容:
/* CSS */
#dropDown {
background: url(menuBottom.png) no-repeat bottom;
padding-bottom: 40px; /* adjust based on the height of the bottom image */
}
#dropDown ul {
border-color: orange;
border-width: 0 5px;
}
<!-- HTML -->
<nav id="dropDown">
<ul>
...
</ul>
</nav>
要动态显示/隐藏菜单,您可以使用jQuery。
// When the page has loaded
$(document).ready(function() {
// Hide the drop-down menu
$('#dropDown ul').hide();
$('#dropDown').hover(function() {
// Show on mouse over
$('#dropDown ul').show();
}, function() {
// Hide on mouse out
$('#dropDown ul').hide();
});
});
有关详细信息,A List Apart有一篇很棒的文章,将无序列表样式化为http://www.alistapart.com/articles/taminglists/的菜单。您可能还想查看http://api.jquery.com/hover/以获取有关使用jQuery的悬停事件的详细信息。
答案 2 :(得分:-1)
EDITED(改进了整个代码......包括jQuery 1.7.1)
与此处提到的许多人一样,您可以使用图像作为背景。使用border-radius,您可以保持InternetExplorer 8-访问者的外观。我,我自己花了几个月的时间尝试使用每个人的png-fix /插件等给IE8圆角,但最后,我放弃并使用了图像。
事实证明,在编码方面它是一种很少的压力,并且应用精灵会使事情变得更加容易。
最底部(圆形部分)是整个图像(在我的情况下),侧面是同一图像的切口,高度为1px,并在中心清洁。
我申请参加我的&#34;练习&#34;:
<style type='text/css' media='screen'>
#wrapper { position:relative; width:800px; height:800px; margin:0 auto; display:block; z-index:1; }
#docHeader { position:relative; margin:0; width:100%; height:60px; overflow:hidden; background-color:green;
color:orange; font-size:36px; text-align:center; line-height:60px; vertical-align:middle; z-index:2; }
.nav {
cursor:pointer;
}
.navContent {
width:172px;
height:0px;
overflow:hidden;
background: transparent url(content.png) repeat-y top left;
}
.navContent span {
display:block;
margin-left:8px;
line-height:22px;
font-size:14px;
text-align:left;
}
.navTitle {
width:172px;
height:35px;
text-align:center;
line-height:35px;
vertical-align:middle;
color:green;
font-size:24px;
background: transparent url(bottom.png) no-repeat top left;
}
#docBody { position:relative; margin:0; width:100%; height:100%; overflow:auto; z-index:2; }
#content { position:absolute; top:0; left:0; width:100%; min-height:600px; background:transparent; overflow:auto; z-index:3; }
</style>
javascript:
<script type='text/javascript' src='jquery-1.7.1.min.js'></script>
<script type='text/javascript'>
jQuery( function () {
$('div.nav').on( {
mouseenter : function () {
var $this = $(this);
$this.addClass('mouseHasEntered');
if ($this.hasClass('mouseHasLeft')) $this.removeClass('mouseHasLeft');
setTimeout( function () {
if ($this.hasClass('mouseHasEntered')) {
var iCount = $this.find('span').length * 24;
$this.find('.navContent').animate( { 'height' : iCount+'px' },1000 );
}
},100);
},
mouseleave : function () {
var $this = $(this);
$this.addClass('mouseHasLeft');
if ($this.hasClass('mouseHasEntered')) $this.removeClass('mouseHasEntered');
setTimeout( function () {
if ($this.hasClass('mouseHasLeft')) {
$this.find('.navContent').animate( { 'height' : '0px' },1000 );
}
},200);
}
});
});
$(document).ready( function () {
setTimeout( function () { /// show the spinning ajax loader gif
$('#content').load('roundMenu.content.html');
},2000);
});
</script>
身体的一面:
<div id='wrapper' >
<div id='docHeader' >The Header</div>
<div class='nav' style='position:absolute; top:60px; left:0; z-index:5; ' >
<div class='navContent' >
<span>Go here</span>
<span>Go there</span>
</div>
<div class='navTitle' >OPTIONS I</div>
</div>
<div class='nav' style='position:absolute; top:60px; left:209px; z-index:5; ' >
<div class='navContent' >
<span>Go here 2</span>
<span>Go there 2 </span>
<span>Go ever there </span>
</div>
<div class='navTitle' >OPTIONS II</div>
</div>
<div class='nav' style='position:absolute; top:60px; left:418px; z-index:5; ' >
<div class='navContent' >
<span>Go here 3</span>
<span>Go there 3 </span>
<span>Go ever there 2</span>
</div>
<div class='navTitle' >OPTIONS III</div>
</div>
<div class='nav' style='position:absolute; top:60px; left:628px; z-index:5; ' >
<div class='navContent' >
<span>Go here 4</span>
<span>Go there 4 </span>
<span>Go ever there 3</span>
<span>Why not complicate</span>
</div>
<div class='navTitle' >OPTIONS IV</div>
</div>
<div id='docBody' >
<div id='content' >
<img src='ajax-Loader.gif' border='0' alt='0' style='position:relative; margin:45% 45%; ' />
</div>
</div>
</div>