Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript
Перезагрузить страницу

Проблема с получением необходимого эффекта


Проблема с получением необходимого эффекта

Обсуждение темы Проблема с получением необходимого эффекта в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Доброго времени суток. В общем суть проблемы в следующем: при заданной архитектуре кода html необходимо, чтобы всплывающее меню не налезало на основное, а ...


Закрытая тема
 
Опции темы
Старый 04.11.2010, 10:05   #1
Доброго времени суток. В общем суть проблемы в следующем: при заданной архитектуре кода html необходимо, чтобы всплывающее меню не налезало на основное, а оказывалось под ним. Может подскажете решение или подкинете мысль - где код менять: в скрипте или стилях?
Код:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF8">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

    <script type="text/javascript">
      $(document).ready(function() {
         var mainNavLinks = $('ul#topmenu li');
         var prevIndex = 0;
         var curIndex = 0;
         SpanInit(0);
         
         $("ul#topmenu li").hover(function() {
            curIndex = mainNavLinks.index(this);
            $(this).css({ 'background' : '#1376c9'});
            $("ul#topmenu li span").show();
            SlideSpan(-curIndex * 30, curIndex > prevIndex ? curIndex - prevIndex : prevIndex - curIndex );
         }, function() {
            $("ul#topmenu li span").hide();
            $(this).css({ 'background' : 'none'});
            prevIndex = mainNavLinks.index(this);
         });
      });

      function SpanInit(CurTop) {
         $("ul#topmenu li span").each(function(i) {
            $(this).hide();
            $(this).css( {'margin-top' : CurTop} );
            CurTop = CurTop + 30;
         });
      }

      function SlideSpan(CurTop, K)
      {
         $("ul#topmenu li span").stop(true, false);
         $("ul#topmenu li span").each(function(i) {
            $(this).animate( {marginTop:CurTop}, K * 300 );
            CurTop += 30;
         });
      }
   </script>

   <style>
      body
      {
         padding: 0px;
         margin: 0px;
         text-align: center
      }
      html
      {
         padding: 0px;
         margin: 0px;
         text-align: center
      }
      #topmenu
      {
         margin: 0px;
         padding: 0;
         float: left;
         height: 30px;
         list-style: none;
         position: relative;
         font-size: 12px;
         background: #000;
      }
      #topmenu li
      {
         float: left;
         margin: 0;
         padding: 0;
         border-right: 1px solid #555;
         height: 30px;
      }
      #topmenu li a
      {
         padding: 10px 15px;
         display: block;
         color: #f0f0f0;
         text-decoration: none;
      }
      #topmenu li span
      {
         float: left;
         position: absolute;
         padding: 9px;
         left: 0;
         top: 30px;
         background: #1376c9;
         width: 400px;
         text-align: left;
      }
      #topmenu li span a
      {
         display: inline;
      }
      div
      {
         position: absolute;
         margin: 7px;
         padding: 0px;
         overflow: hidden;
         width: 360px;
         height: 60px;
      }
   </style>

</head>

<body>
   <div>
      <ul id="topmenu">
         <li><a href="#">Меню 1</a>
            <span>
               <a href="#">Подменю 1.1</a>
               <a href="#">Подменю 1.2</a>
               <a href="#">Подменю 1.3</a>
            </span>
         </li>
         
         <li><a href="#">Меню 2</a>
            <span>
               <a href="#">Подменю 2.1</a>
               <a href="#">Подменю 2.2</a>
               <a href="#">Подменю 2.3</a>
            </span>
         </li>
         
         <li><a href="#">Меню 3</a>
            <span>
               <a href="#">Подменю 3.1</a>
               <a href="#">Подменю 3.2</a>
               <a href="#">Подменю 3.3</a>
            </span>
         </li>
      </ul>
   </div>
</body>
</html>
 
Старый 04.11.2010, 10:05
Ссылки
Старый 04.11.2010, 10:52   #2
А какого эффекта нужно добиться?
Код HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("ul li").hover(
  function () {
    $(this).find("div").slideDown(300);
  }, 
  function () {
    $(this).find("div").slideUp(300);
  }
);

});
</script>
<style>
html, body {padding: 0; margin: 0; text-align: center}
ul {position: relative; margin: 0; padding: 0;}
ul li {float: left; list-style: none; margin: 0; padding: 0;}
ul li a {padding: 10px 15px; display: block; color: #f0f0f0; text-decoration: none; background: #000;}
ul li a:hover {background: #1376c9;}
ul li div {display: none; position: absolute; left: 0; top: 40px;}
ul li div a {float: left; display: inline-block;}
</style>
</head>

<body>
<ul>
	<li><a href="#">Меню 1</a>
    	<div>
        	<a href="#">Подменю 1.1</a>
        	<a href="#">Подменю 1.2</a>
        	<a href="#">Подменю 1.3</a>
        </div>
    </li>
	<li><a href="#">Меню 2</a>
    	<div>
        	<a href="#">Подменю 2.1</a>
        	<a href="#">Подменю 2.2</a>
        	<a href="#">Подменю 2.3</a>
        	<a href="#">Подменю 2.4</a>
        	<a href="#">Подменю 2.5</a>
        </div>
    </li>
	<li><a href="#">Меню 3</a>
    	<div>
        	<a href="#">Подменю 3.1</a>
        	<a href="#">Подменю 3.2</a>
        	<a href="#">Подменю 3.3</a>
        	<a href="#">Подменю 3.4</a>
        </div>
    </li>
</ul>
</body>
</html>
 
Старый 04.11.2010, 11:15   #3
Представьте себе текст: на текст наложили трафарет с одной пустой строкой (то есть только под этой строкой виден текст). Теперь эту книжку под трафаретом начинают двигать либо вверх, либо вниз.

Как это выглядит для данного меню буквально:
Наводим указатель на "меню 1" - вверх всплывает первая строка ("подменю 1"); наводим указатель на "меню 2" - вверх всплывает вторая строка ("подменю 2"), при этом "подменю 1" также смещается вверх, но под основное меню; наводим указатель обратно на "меню 1" - вторая строка смещается вниз; первая - вниз, появляясь из под основного меню.

В общем вся проблема заключается в перекрывании меню.
 
Старый 04.11.2010, 11:53   #4
sqwart лучше показать на примере картинко*, чтобы было точно понятно
 
Старый 05.11.2010, 12:04   #5
Хорошо, попозже дам ссылку на флеш пример того, что нужно

Добавлено через 4 часа 22 минуты

http://zalil.ru/29917984 - вот ссылка на флешку с правильной анимацией

Добавлено через 18 часов 36 минут

Тема закрыта. Вот полное решение:

Код:
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF8">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

    <script type="text/javascript">
		$(document).ready(function() {
		   var mainNavLinks = $('ul#topmenu li');
		   var prevIndex = 0;
		   var curIndex = 0;
		   SpanInit(0);

		   $("ul#topmenu li").hover(function() {
			  curIndex = mainNavLinks.index(this);
				 $(this).find('a').css({ 'background' : '#1376c9'});
				 $(this).find('span a').css({ 'background' : 'none'});
				 $("ul#topmenu li span").show();
				 SlideSpan(-curIndex * 30, curIndex > prevIndex ? curIndex - prevIndex : prevIndex - curIndex );
			  }, function() {
				 $("ul#topmenu li span").hide();
				 $(this).find('a').css({ 'background' : '#000'});
				 $(this).find('span a').css({ 'background' : 'none'});
				 $(this).css({ 'background' : '#000'});
				 prevIndex = mainNavLinks.index(this);
			  });
		   });

		   function SpanInit(CurTop) {
			  $("ul#topmenu li span").each(function(i) {
			  $(this).hide();
			  $(this).css( {'margin-top' : CurTop} );
			  CurTop = CurTop + 30;
			  });
		   }

		   function SlideSpan(CurTop, K)
		   {
			  $("ul#topmenu li span").stop(true, false);
			  $("ul#topmenu li span").each(function(i) {
			  $(this).animate( {marginTop:CurTop}, 300 );
			  CurTop += 30;
		   });
		}
   </script>

   <style>
		body
		{
		   margin: 0px;
		   padding: 0px;
		   text-align: center
		}
		html
		{
		   margin: 0px;
		   padding: 0px;
		   text-align: center
		}
		#topmenu
		{
		   position: relative;
		   margin: 0px;
		   padding: 0px;
		   width: 605px;
		   float: left;
		   list-style: none;
		   font-size: 12px;
		}
		a:focus {
		   outline: none;
		}
		#topmenu li
		{
		   float: left;
		}
		#topmenu li a
		{
		   position: relative;
		   margin: 0px;
		   padding: 7px 15px;
		   display: block;
		   text-decoration: none;
		   border-right: 1px solid #555;
		   background: #000;
		   color: #f0f0f0;
		   height: 19px;
				width: 90px;
		   z-index:1;
		}
		#topmenu li span
		{
		   position: absolute;
		   margin: 0px;
		   padding: 9px;
		   left: 0;
		   width: 100%;
		   background: gray;
		   text-align: left;
		   z-index: 0;
		}
		#topmenu li span a
		{
		   background: none;
		   display: inline;
		}
		div
		{
		   margin: 7px;
		   padding: 0px;
		   overflow: hidden;
		   width: 359px;
		   height: 61px;
		}
   </style>

</head>

<body>
   <div>
      <ul id="topmenu">
         <li><a href="#">Меню 1</a>
            <span>
               <a href="#">Подменю 1.1</a>
               <a href="#">Подменю 1.2</a>
               <a href="#">Подменю 1.3</a>
            </span>
         </li>
         
         <li><a href="#">Меню 2</a>
            <span>
               <a href="#">Подменю 2.1</a>
               <a href="#">Подменю 2.2</a>
               <a href="#">Подменю 2.3</a>
            </span>
         </li>
         
         <li><a href="#">Меню 3</a>
            <span>
               <a href="#">Подменю 3.1</a>
               <a href="#">Подменю 3.2</a>
               <a href="#">Подменю 3.3</a>
            </span>
         </li>
      </ul>
   </div>
</body>
</html>
Последний раз редактировалось sqwart; 05.11.2010 в 12:04.. Причина: Добавлено сообщение
 
Старый 05.11.2010, 12:04
Закрытая тема

« JavaScript помогите разобраться | Dreamweaver CS3 (timelines) »



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Проблема с получением $_COOKIE Anthony ASP, Perl, PHP и MySQL 5 27.12.2009 00:22
проблема с ftp Анастасия Софтодром 4 25.02.2008 14:55
Проблема с Ie cysquatcj HTML, CSS, JavaScript 0 21.07.2007 19:37
код для применения текстового эффекта veol Технологии Flash 0 11.11.2005 00:44
Проблема... VERMIN[SD] Растровая графика 4 21.09.2005 09:51


Текущее время: 07:54. Часовой пояс GMT +4.



Справка - Обратная связь - Web-silver.ru - Архив - Календарь - Карта - Вверх

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Дизайнерский форум