|
Проблема с получением необходимого эффектаОбсуждение темы Проблема с получением необходимого эффекта в разделе 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: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.. Причина: Добавлено сообщение |
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Проблема с получением $_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 |
Реклама на форуме
Условия размещения рекламы
Биржа ссылок
Заработай на сайте!
|