webew
Войти » Регистрация
 
JavaScript

Всплывающий DiV

16 декабря 2010, 5:38
Автор: Fraks
Здраствуйте!
Поставили задачу сделать такое меню, как на сайте national geographic.
Я не очень понимаю, как сделать всплывающие блоки, как там (например при наведении мышкой на Photography, Animals и так далее).
Буду очень признателен за помощь!
Добавить комментарий

1234ru

Примерно так (неидеальное решение, но работать будет):
<style type="text/css">
 .menu tr.secondary-menu { display: none; }
 .menu tr.active { display: table-row; }
</style>


<table class="menu">
 <tr class="mainmenu">
  <td id="mm-1">Photography</td>
  <td id="mm-2">Animals</td>
  <td id="mm-3">etc.</td>
 </tr>

 <!-- пусть в данный момент активным является пункт Animals главного меню -->

 <tr id="sm-1" class="secondary-menu"><td>Photography home</td><td>Photo of the Day</td><td>Galleries</td></tr>
 <tr id="sm-2" class="secondary-menu active"><td>Animals Home</td><td>Facts</td><td>Photos</td></tr>
 <tr id="sm-3" class="secondary-menu"><td>...</td></tr>

</table>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<script type="text/javascript">
 $('.menu tr.mainmenu td').mouseover(function() {
  var N = $(this).attr('id').replace('mm-', '');
  $('.menu tr.secondary-menu').css('display', 'none');
  $('.menu tr#sm-' + N).css('display', 'table-row');  
 });
 
 $('.menu').mouseout(function() {
  $('.menu tr.secondary-menu').css('display', 'none');
  $('.menu tr.active').css('display', 'table-row');  
 });

</script>


Если меню нужно на всю ширину страницы - поставьте .menu { width: 100%; }
jQuery лучше скачайте к себе на сервер.
То, что не убивает нас, делает нас инвалидами.
18.12.2010, 14:14
Ответить
© 2008—2017 webew.ru, связаться: x собака webew.ru
Сайт использует Flede и соответствует стандартам WAI-WCAG 1.0 на уровне A.
Rambler's Top100

Реклама: