0

Есть картинка,по нажатию на которую nav плавно выезжает слева на право.

html

   <div class="navbar">
    <img src="http://m.liveperson.com/themes/images/menu-icon-hd-36-off.png" />
    <nav id="menu">
        <ul>
            <li>
                <a href="home.html">Home</a>
            </li>
            <li>
                <a href="work.html">Work</a>
            </li>
            <li>
                <a href="contact.html">Contact</a>
            </li>
            <li>
                <a href="about.html">About</a>
            </li>
        </ul>
    </nav>
</div>

css

img {
    float:left;
    z-index:10;
}

nav {
    float:left;
    z-index:9;
    overflow:hidden;
}
ul {
    margin-left:-100%;
    /* just a quick clearfix */
    overflow:hidden;


    -webkit-transition: margin-left 1s ease-in-out;
    -moz-transition: margin-left 1s ease-in-out;
    -ms-transition: margin-left 1s ease-in-out;
    -o-transition: margin-left 1s ease-in-out;
    transition: margin-left 1s ease-in-out;
}
li {
    float:left;
    margin-right:10px;
}

ul.active {
    margin-left:0;
}

js

$(".navbar img").click(function() {
    var menu = $("ul").toggleClass('active');
});

Пытаюсь сделать наоборот,но не выходит,что бы картинка была справа,а nav также плавно с другой стороны выезжал,но безуспешно http://jsfiddle.net/ymsHb/21/ (наработка справа налево) код выше это слева направо

2 ответа 2

1

если я вас правильно понял, то вот:

$(".navbar img").click(function() {
    var menu = $("ul").toggleClass('active');
});
img {
    float:right;
    z-index:10;
}

nav {
    float:left;
    z-index:9;
    overflow:hidden;
}
ul {
    margin-left:100%;
    /* just a quick clearfix */
    overflow:hidden;
    position: absolute;
    width: 300px;


    -webkit-transition: margin-left 1s ease-in-out;
    -moz-transition: margin-left 1s ease-in-out;
    -ms-transition: margin-left 1s ease-in-out;
    -o-transition: margin-left 1s ease-in-out;
    transition: margin-left 1s ease-in-out;
}
li {
    float:left;
    margin-right:10px;
}

ul.active {
    margin-left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="navbar">
  <img src="http://m.liveperson.com/themes/images/menu-icon-hd-36-off.png" />
  <nav id="menu">
    <ul>
      <li>
        <a href="home.html">Home</a>
      </li>
      <li>
        <a href="work.html">Work</a>
      </li>
      <li>
        <a href="contact.html">Contact</a>
      </li>
      <li>
        <a href="about.html">About</a>
      </li>
    </ul>
  </nav>
</div>

3
  • Только она должна также выезжать с левого края картинки
    – zkolya
    Commented 9 февр. 2016 в 13:26
  • Добавил позиционирование. Теперь, по идее, так, как вы желаете
    – lexxl
    Commented 9 февр. 2016 в 13:39
  • Благодарю,очень помогли!
    – zkolya
    Commented 9 февр. 2016 в 16:24
1

Ну что было просто поменять все слова right на left

img {
    float:left;
    z-index:10;
}

nav {
    float:left;
    z-index:9;
    overflow:hidden;
}
ul {
    margin-left:100%;
    /* just a quick clearfix */
    overflow:hidden;


    -webkit-transition: margin-left 1s ease-in-out;
    -moz-transition: margin-left 1s ease-in-out;
    -ms-transition: margin-left 1s ease-in-out;
    -o-transition: margin-left 1s ease-in-out;
    transition: margin-left 1s ease-in-out;
}
li {
    float:left;
    margin-left:10px;
}

ul.active {
    margin-left:0;
}

Вот как то так должно быть.

http://jsfiddle.net/ymsHb/23/

Ваш ответ

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

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