1

次のようなメニュー付きのメニューがあります。

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

}

それがどのように見えるかです:ここに画像の説明を入力

4

1 に答える 1