次のようなメニュー付きのメニューがあります。
<div class="menuContainer">
<div id="titlebarDiv" style="float: left;">
<a>Item 1</a>
<div id="container">
<input type="button" value="0" class="masterPageNotifier" style="height: 30px;"onclick="NotifierButtonClicked()" />
<input type="hidden" value="" class="mehidden" />
<ul class="selectBox" />
</div>
<a>Item 2</a>
<a>Item 3</a>
<a>Item 4</a>
<a>Item 5</a>
<div>
<div>
間にあるのを見るとわかるように、div
中にボタンがあり、ボタンをクリックすると、ul がclass="selectbox"
下にスライドしてアイテムが表示されます。ここでの問題は、メニューをそれ自体で動作させることができることですが、その間にボタンを追加するとすぐに、ボタンがすべてを1行下に移動し、ボタンをクリックすると.menuContainers
背景が引き伸ばされます。通知ボタンがクリックされたときにFacebookのようにしたい.コンテナdivの絶対位置で試してみましたが、うまくいきませんでした。
CSS :
input[type="submit"],
input[type="button"],
button {
background:#5CCD00;
background:-moz-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5CCD00),color-stop(100%,#4AA400));
background:-webkit-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-o-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:-ms-linear-gradient(top,#5CCD00 0%,#4AA400 100%);
background:linear-gradient(top,#5CCD00 0%,#4AA400 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5CCD00',endColorstr='#4AA400',GradientType=0);
padding:10px 15px;
color:#fff;
font-family:'Helvetica Neue',sans-serif;
font-size:13px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:1px solid #459A00;
}
.menuContainer
{
width: 1000px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background-color: purple;
}
function NotifierButtonClicked() {
if (checked == false) {
checked = true;
GetNotificationsForUser();
$('.selectBox').slideToggle(200).css('borderTop', 'none');
$('.selectBox li').click(function () {
$('.selectBox').slideUp(200);
});
//$('.masterPageNotifier').val("0");
}
else if (checked == true) {
checked = false;
$('.selectBox').slideUp(200);
}
}
それがどのように見えるかです: