Шаблоны для всплывающего меню jQuery или CSS с помощью кнопки - PullRequest
Новая
       6

Шаблоны для всплывающего меню jQuery или CSS с помощью кнопки

2 голосов
/ 11 ноября 2010

Я пытаюсь найти лучшие шаблоны для создания всплывающего меню на основе jQuery или CSS при нажатии кнопки.

Мне бы хотелось получить что-то вроде этого:

alt text

Я даже не уверен, как это осмыслить, поэтому любая помощь будет принята с благодарностью.Сделайте это на высоком уровне, если хотите, хотя рабочий пример (JSFiddle) будет лучшим.

Спасибо!

Ответы [ 3 ]

1 голос
/ 11 декабря 2010

Это было довольно просто выяснить, и большое спасибо @NateL в #jquery на IRC за помощь в выяснении CSS на этом.

Вот что я реализовал:

CSS 

.all-checkboxes-menu
{
  position: absolute;
  width: auto;
  height: auto;
  display: none;
  top: 28px;
  left: 7px;
  background-color: white;
  z-index: 1;
  box-shadow: 0px 5px 5px #999;
  -moz-box-shadow: 0px 5px 5px #999;
  -webkit-box-shadow: 0px 5px 5px #999;
}

.tasks-submenu
{
  padding: 5px;
}

.tasks-submenu li
{
  list-style: none;
  padding-top: 2px;
  padding-bottom: 2px;
}

.tasks-submenu li:hover
{
  background-color: #fcf7bd;
}

HTML 

        <div class="all-checkboxes-menu">
          <ul class="tasks-submenu">
            <li>All</li>
            <li>None</li>
            <li>Due Today</li>
            <li>Overdue</li>
          </ul>
        </div>

Важнейшей частью CSS является position: absolute, и родительский div должен быть явно задан position: relative.Обратите внимание, что display: none используется изначально.В коде jQuery я вызываю .css({'display': 'block'}), чтобы показать подменю.

Результат выглядит следующим образом:

Submenu

0 голосов
/ 11 ноября 2010

http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/DropDown/DropDown.aspx

Проверьте, работает ли этот раскрывающийся список так, как вы этого хотите.Я не прошу вас использовать именно этот, я спрашиваю, нравится ли вам этот эффект.

Поисковый термин "droppointlist для sharepoint", потому что sharepoint использует этот же метод для создания выпадающих тем.*

0 голосов
/ 11 ноября 2010

Мы внедрили это меню в следующем месте

http://www.allposters.com/ и даже www.art.com, так как это код javascript, который вы можете скопировать из одного из файлов javascript.

Это header_menu.js.

Если вы хотите добиться успеха без jquery или javascript, дайте мне знать, что мы можем реализовать и с CSS, что является дружественным для SEO.

Но чтобы иметь хороший эффект, его лучше реализовать через jquery или javascript. Дайте мне знать, если вам нужна помощь, я могу предоставить вам все детали.

...