Кнопка меню в сети Страница

Question

Я ищу решение для отображения кнопки меню на веб-странице, предпочтительно с использованием кода на стороне клиента (например, плагин jQuery и т. Д.). Единственным требованием является то, что он должен хорошо сочетаться с кнопками по умолчанию и выглядеть. Пример кнопки меню, которую я могу указать, - это кнопка «Ярлыки или действия» в GMail

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

Answer 1

Я не знаком с кнопками GMail. Тем не менее, использование CSS позволит вам получить большую свободу в настройке вашей кнопки. Это можно сделать, используя html-списки и украсить их в CSS.

Вы могли бы разместить что-то вроде этого Html:

<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Тогда ваш CSS может сделать много с этим, такие как:

#menu li { list-style:url('customimage.jpg'); padding:.5em; margin:1em; width:12em; background-color:#F00; border:1px solid #000;}

Это даст вам список меню с настраиваемой маркой (ваш стиль списка) с конкретными дополнениями и полями с красным цветом фона и черной рамкой. Каждый элемент также будет 12 м (около 125 пикселей).

Вы могли бы даже получить фантазии и добавить в свой CSS:

#menu li:Hover {border:1px solid #FF0;}

В ожидании некоторых потенциальных конфликтов браузера с более старыми версиями, всякий раз, когда пользователь будет мыши на пункты меню его границы изменит цвет.

Надеюсь, это поможет вам объяснить это. Вы можете выполнять поиск в Google для учебных пособий по меню CSS, и вы можете найти несколько простых и очень сложных руководств.

Answer 2

Я думаю, что вы ищете CSS-спрайты
Есть некоторые ресурсы на
Basic explanation - AListApart
Design Guides - SmashingMagazine