弹出菜单,单击图标,以及菜单项下拉列表。大多数弹出菜单似乎都有单击时生成的菜单项作为DIV。
任何解决方案?
由于
答案 0 :(得分:0)
您是在谈论这样的事情:点击更多产品标签:Website example
如果是这样,那么这是通过以下html,css和jquery完成的:
<强> HTML 强>
<div class="mainHeaderNav">
<ul>
<li>
<a href="" class="LeftHand">Tab1</a>
</li>
<li>
<a href="/decreasingcover" class="Middle">Tab2</a>
</li>
<li>
<a href="/increasingcover" class="RightHand">Tab3</a>
</li>
<li class="moreProductsTab"><a href="#" class="tab" onclick="ToggleMoreProductsMenu();">
<span class="tabTitle">More</span>
<span class="tabSubTitle">Products</span>
<!--[if gt IE 7]><!-->
</a>
<!--<![endif]-->
<!--[if lte IE 7]><table><tr><td><![endif]-->
<ul id="productsMenu">
<li><a href="http://www.ecarinsurance.co.uk" target="_blank"><span class="linkText">Car Insurance</span><span class="arrow"> </span></a></li>
<li><a href="http://www.ehomeinsurance.co.uk" target="_blank"><span class="linkText">Home Insurance</span><span class="arrow"> </span></a></li>
<li><a href="http://www.ebikeinsurance.co.uk" target="_blank"><span class="linkText">Bike Insurance</span><span class="arrow"> </span></a></li>
<li><a href="http://www.evaninsurance.co.uk" target="_blank"><span class="linkText">Van Insurance</span><span class="arrow"> </span></a></li>
<li><a href="http://www.etravellerinsurance.co.uk" target="_blank"><span class="linkText">Travel Insurance</span><span class="arrow"> </span></a></li>
<li><a href="http://www.etradesmaninsurance.co.uk" target="_blank"><span class="linkText">Business Insurance</span><span class="arrow"> </span></a></li>
</ul>
<!--[if lte IE 7]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
<强> CSS 强> / 整体菜单样式开始 /
.mainHeaderNav
{
position:relative;
height:50px;
top:91px;
z-index:99;
padding:0px 0px 0px 58px;
font-family:Arial;
}
.mainHeaderNav ul
{
list-style:none;
padding:0px;
margin:0px 0px 0px 50px;
height:50px;
}
.mainHeaderNav ul li a.tab
{
background-image:url('/Content/images/elife/backgrounds/elifenavbar.png');
background-repeat:no-repeat;
float:left;
height:50px;
}
.mainHeaderNav ul li.moreProductsTab
{
float:right;
margin-right:10px;
}
.mainHeaderNav ul li.moreProductsTab a.tab
{
background-position:-730px top;
width:83px;
height:33px;
}
.mainHeaderNav ul li.moreTab a:hover
{
background-position:-730px -51px;
}
.mainHeaderNav ul li a
{
text-align:center;
display:-moz-inline-stack;
display:block;
float:left;
height:50px;
line-height:50px;
text-transform:uppercase;
color:#09207B;
letter-spacing:-0.06em;
font-weight:bold;
text-decoration:none;
text-shadow:#EBFAFF 0px 1px 1px;
}
.mainHeaderNav ul li a:hover
{
color:#09207B;
}
.mainHeaderNav ul li.moreProductsTab a
{
padding:17px 0px 0px 10px;
height:33px;
line-height:20px;
text-align:left;
text-shadow:none;
}
/*Overall Menu Styling Start*/
.mainHeaderNav ul
{
padding:0px;
margin:0px;
list-style-type:none;
}
.mainHeaderNav li
{
float:left;
position:relative;
}
.noscript .mainHeaderNav ul li.moreProductsTab ul
{
margin-top:-1px;
}
.mainHeaderNav ul li.moreProductsTab ul
{
padding-bottom:20px;
}
.mainHeaderNav ul li.moreProductsTab ul li
{
padding:0px 0px 0px 10px;
margin:0px 0px 0px 0px;
}
.mainHeaderNav li.selected ul a
{
background-image:none;
}
.mainHeaderNav :hover > a
{
background-color:Transparent;
background-repeat:no-repeat;
color:#000000;
}
/*Overall Menu Styling End*/
/*Second level Menu Styling Start*/
.mainHeaderNav ul li.moreProductsTab ul
{
width:200px;
height:auto;
position:absolute;
display:none;
top:51px;
left:-108px;
background-image:url('/Content/images/elife/backgrounds/bkg_dropdown.png');
background-repeat:no-repeat;
background-position:left bottom;
}
.noscript .mainHeaderNav ul li.moreProductsTab ul
{
display:block;
visibility:hidden;
-moz-box-shadow:0 0 10px #555555;
}
.mainHeaderNav ul li.moreProductsTab ul a,
.mainHeaderNav ul li.moreProductsTab ul a:visited
{
color:#09207B;
font-size: 1.3em !important;
font-family:Arial,Helvetica,sans-serif;
font-weight:normal;
height:22px;
line-height:24px;
width:155px;
text-align:left;
text-transform:none;
background-color:transparent;
padding:3px 0px 3px 20px;
}
.noscript .mainHeaderNav ul li.moreProductsTab ul a:hover
{
padding:3px 0px 3px 25px;
}
.mainHeaderNav ul li.moreProductsTab ul a:hover
{
font-weight:bold;
}
.mainHeaderNav ul li.moreProductsTab ul a span.arrow
{
display:-moz-inline-stack;
display:inline-block;
height:24px;
width:14px;
background-image:url('/Content/images/site/backgrounds/bkg_arrow2.png');
background-repeat:no-repeat;
background-position:right center;
}
.mainHeaderNav ul li.moreProductsTab ul :hover > a
{
background-color:#FFF46E;
}
/*Second level Menu Styling End*/
/*Show and hide menus when hovering start*/
.noscript .mainHeaderNav ul li:hover ul,
.noscript .mainHeaderNav ul a:hover ul
{
visibility:visible;
}
/*Show and hide menus when hovering end*/
.mainHeaderNav ul li.moreProductsTab a.tab:hover
{
background-position:-730px -51px;
}
<强>的jQuery 强>
$(document).ready(function () {
$('#productsMenu').bind('click', ToggleMoreProductsMenu);
$('#productsMenu').bind('mouseleave', CloseMenu);
$('#productsMenu li a').bind('mouseenter', AnimateProductsMenuRight);
$('#productsMenu li a').bind('mouseleave', AnimateProductsMenuLeft);
$('.mainHeaderNav > ul > li > a').bind('mousedown', MenuMouseDown);
$('.mainHeaderNav > ul > li > a').bind('mouseup mouseleave', MenuMouseUp);
});
var allowMenuAnimation = true;
function ToggleMoreProductsMenu() {
if (allowMenuAnimation) {
allowMenuAnimation = false;
$('#productsMenu').slideToggle('slow', function () {
EnableMenu();
});
}
}
function EnableMenu() {
allowMenuAnimation = true;
}
function CloseMenu() {
if (!$('#productsMenu').is(':hidden')) {
ToggleMoreProductsMenu();
}
}
function AnimateProductsMenuRight() {
$(this).animate(
{
paddingLeft: '25px',
width:'155px'
},
slideTime,
function () {
});
}
function AnimateProductsMenuLeft() {
$(this).animate(
{
paddingLeft: '20px',
width: '160px'
},
slideTime,
function () {
});
}
function MenuMouseDown() {
$(this).addClass("MouseDown");
}
function MenuMouseUp() {
$(this).removeClass("MouseDown");
}