0

Уважаемые господа! При запуске страницы сие меню изначально находиться в активном состоянии.

Граждане-волшебники, как сделать так, что бы при запуске оно было свернутым, а при надобности можно было его вызвать нажатием на стрелочку? Вы уж посоветуйте мало мальскому верстальщику.

<!DOCTYPE html>
<html lang="ru" >
    <head>
        <meta charset="utf-8" />

        <style>
        .menuContent {
          width:180px;
    padding:1px;
    float:left;
    margin-right:1px;
    margin-bottom:1px;

    background-color:#FFF;
    background-image: -moz-linear-gradient(center top, #FFF, #FFF, #FFF, #ddd);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#FFF), color-stop(0.5, #FFF), to(#ddd)); 
    border:1px solid #C7C7C7;
    bottom: 0px;
    right: 0px;
    padding: 0 15px 5px;
    position: fixed;
    width:170px;

    -moz-border-radius-topright: 10px;
    -moz-border-radius-topleft: 10px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
    -moz-box-shadow: 3px -3px 5px #B8B8B8;
    -webkit-box-shadow: 3px -3px 5px #B8B8B8;
    box-shadow: 3px -3px 5px #B8B8B8;
}

.menuContent a.slider {
    background-color:#fff;
    background-image: -moz-linear-gradient(center top , #ddd, #FFF);
    background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF));
    border: 1px solid #C7C7C7;
    border-bottom:none;
    cursor: pointer;
    float:right;
    height: 8px;
    margin:-15px 30px 0 0;
    padding:3px 20px;
    width: 8px;
    z-index: 2001;

    -moz-border-radius-topright: 7px;
    -moz-border-radius-topleft: 7px;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
    -moz-box-shadow: 3px -2px 3px #B8B8B8;
    -webkit-box-shadow: 3px -2px 3px #B8B8B8;
    box-shadow: 3px -2px 3px #B8B8B8;
}

.menuContent a.slider img {
    padding-bottom: 3px;
}

#nav {
  width:180px;
    padding:1px;

}

#nav li ul li {
    float:left;
    margin-right:1px;
    margin-bottom:1px;}
}

        </style>
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
         <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
        <script type="text/javascript">
       $(function(){
    $('.slider').click(function () { 
        $('#nav').slideToggle(200);

        var img = $(this).find('img');

        if ($(img).attr('id') == 'bot') {
            $(img).attr('src', 'http://sps0.at.ua/arrow_top.png');
            $(img).attr('id', 'top');
        }

        else {
            $(img).attr('src', 'http://sps0.at.ua/arrow_bottom.png');
            $(img).attr('id', 'bot');
        }

    });

    $('.sub').click(function () { 
        var cur = $(this).prev();
        $('#nav li ul').each(function() {
            if ($(this)[0] != $(cur)[0])
                $(this).slideUp(300);
        });
        $(cur).slideToggle(300);
    });
}); 
        </script>
    </head>
    <body>
        <div class="menuContent">
            <a class="slider"><img alt="" id="bot" src="http://sps0.at.ua/arrow_bottom.png"></a>
            <ul id="nav">

                <li><a href="#"><img src="images/t2.png" />PHP</a></li>
                <li><a href="#"><img src="images/t2.png" />PHP</a></li>
                <li><a href="#"><img src="images/t2.png" />PHP</a></li>
            </ul>
        </div>

    </body>
</html>
1
  • @Online World, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом).
    – Deleted
    4 июл 2012 в 7:36

2 ответа 2

0
#nav {
  width:180px;
  padding:1px;
  display:none; //добавили
}

<a class="slider">
  <img alt="" id="top" src="http://sps0.at.ua/arrow_top.png"> //поправили src и id
</a>
1
0

В #nav добавь display:none

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.