Не знаю, можно ли задавать такой вопрос, если, то просто удалите его.

Но сейчас я ищу какое-то слайд-меню. Я искал в Google, но, честно говоря, ничего не нашел. Я больше сторонник HTML / CSS, поэтому я не могу писать код сам, будучи jQuery или чем-то еще. Вот почему я ищу какой-нибудь сценарий, который можно было бы использовать.

Я прикрепил изображение, которое показывает, что я хочу сделать. введите описание изображения здесь

Слева вы видите небольшой прямоугольник в правом верхнем углу, и когда я нажимаю на него, я хочу, чтобы он расширялся вниз и оставался таким, пока я снова не нажму кнопку. И если есть стрелка вверх / вниз, которая меняется в зависимости от состояния, это не повредит.

Итак, кто-нибудь, кто может указать на сценарий, который может это сделать? :)

Заранее спасибо.

0
Denver Dang 8 Июн 2013 в 03:07
Введите код, пожалуйста ...
 – 
Luis
8 Июн 2013 в 03:25
Вы имеете в виду, что хотите сделать это в HTML / JS / CSS (возможно, на веб-странице)?
 – 
Emil Lundberg
8 Июн 2013 в 04:15
Да ... у меня нет кода для этого. Я просто хотел знать, может ли кто-нибудь указать или показать мне какой-нибудь сценарий, который я мог бы использовать.
 – 
Denver Dang
8 Июн 2013 в 04:47
Если вы много работаете над пользовательскими веб-интерфейсами, я действительно рекомендую вам изучить JavaScript и jQuery. Хотя я предпочитаю использовать как можно меньше JavaScript, он позволяет вам добавить немного дополнительных изюминок, таких как анимация и тому подобное. Как вы можете видеть в моем ответе ниже, с jQuery вам действительно не нужно много JavaScript, чтобы делать такие мелочи.
 – 
Emil Lundberg
9 Июн 2013 в 00:47

1 ответ

Лучший ответ

Может как то так?

HTML:

<div id="header">
    <ul>
        <li>Foo</li>
        <li>Bar</li>
        <li>Boo</li>
        <li>Far</li>
    </ul>
    <div id="toggledWrapper">
        <p id="toggled">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <div id="toggler">Toggle</div>
    </div>
</div>

JavaScript (с использованием jQuery):

$(document).ready(function() {
    $("#toggled").hide();

    $("#toggler").click(function () {
        $("#toggled").slideToggle();
    });
});

Живая демонстрация jsFiddle: http://jsfiddle.net/JTcRE/4/

0
Emil Lundberg 9 Июн 2013 в 00:43