Как получить раскрывающееся меню навигации Jquery для расширения элементов веб-страницы [Basic] - PullRequest
Новая
       11

Как получить раскрывающееся меню навигации Jquery для расширения элементов веб-страницы [Basic]

0 голосов
/ 26 февраля 2011

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

Я работаю над сайтом для некоммерческой организации, и в настоящее время я использую Jquery и CSS для создания динамической выпадающей панели навигации. Код + примеры можно найти здесь: http://designreviver.com/tutorials/jquery-css-example-dropdown-menu/

Меню Nav прекрасно работает, однако, когда элементы расширяются, новый контент заставляет остальную часть контента на странице перемещаться вниз, и это портит все форматирование сайта. Большинство веб-сайтов, как правило, просто имеют элементы панели навигации, расширяющие их над остальной частью страницы без изменения местоположения ...

вот пример кода того, что я использую: 

<ul id="cssdropdown">
<li class="headlink">
    <a href="mine.html?search_engines">Search Engines</a>
     <ul>
      <li><a href="http://google.com/">Google</a></li>
      <li><a href="http://yahoo.com/">Yahoo</a></li>
      <li><a href="http://live.com/">Live Search</a></li>
     </ul>
     </li>
      <li class="headlink">
      <a href="mine.html?shopping">Shopping</a>
         <ul>
      <li><a href="http://amazon.com/">Amazon</a></li>
      <li><a href="http://ebay.com/">eBay</a></li>
      <li><a href="http://craigslist.com/">CraigsList</a></li>
     </ul>
 </li>
</ul>

Тогда для CSS: 

   li.headlink ul { display: none; }
   li.headlink:hover ul { display: block; }

Кто-нибудь имеет представление о том, что я могу делать неправильно?

Спасибо!

Dave

Ответы [ 4 ]

1 голос
/ 27 февраля 2011

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

#cssdropdown {position:absolute}

Посмотреть пример на jsFiddle

1 голос
/ 27 февраля 2011

попробуйте изменить эту строку 

li.headlink:hover ul { display: block; }

в это 

li.headlink:hover ul { display: block; position:absolute; }
1 голос
/ 27 февраля 2011

Это может быть тот div-обертка, который его вызывает. Мое оригинальное решение должно работать, если вы удалите его. Вы также можете попробовать решение от Juventus18, но также добавить: 

li.headlink { position: relative }

поэтому ваш код будет: 

li.headlink { position: relative }
li.headlink:hover ul { display: block; position:absolute; }
1 голос
/ 27 февраля 2011

Вы пытались поместить float на li.headLink, как показано ниже?Кажется, это вызвано тем, что ваши пункты меню не плавают. 

li.headlink { float:left }
...