Выдвигающееся подменю

Spidey · June 23, 2011

Здравствуйте господа! Хотел поинтересоваться сталкивался ли кто с меню, особенность которого в том, что:

Разделы основного меню расположены вертикально друг под другом, а под меню с различными эффектами выезжает справа или слева при навидении на определенный пункт основнго меню!

Если у кго есть какая инф, буду очень рад примерам!

Спасибо

PS. гуглил, требуемого ничего не нашел!

s0rr0w · June 23, 2011

Здравствуйте господа! Хотел поинтересоваться сталкивался ли кто с меню, особенность которого в том, что:
Разделы основного меню расположены вертикально друг под другом, а под меню с различными эффектами выезжает справа или слева при навидении на определенный пункт основнго меню!
Если у кго есть какая инф, буду очень рад примерам!
Спасибо
PS. гуглил, требуемого ничего не нашел!

Т.е., ты предлагаешь нам за тебя погуглить или написать тебе готовый код?

Spidey · June 23, 2011

Здравствуйте господа! Хотел поинтересоваться сталкивался ли кто с меню, особенность которого в том, что:
Разделы основного меню расположены вертикально друг под другом, а под меню с различными эффектами выезжает справа или слева при навидении на определенный пункт основнго меню!
Если у кго есть какая инф, буду очень рад примерам!
Спасибо
PS. гуглил, требуемого ничего не нашел!
Т.е., ты предлагаешь нам за тебя погуглить или написать тебе готовый код?

То есть, если почитать внимательно, то будет ясно, что я обращаюсь к тем людям которые с этим сталкивали и у них есть какие-то примеры/наработки "...Хотел поинтересоваться сталкивался ли кто с меню, особенность которого в том, что:..."

Или в моем тексте вы где-то разглядели, что то подобное этому "Все дружно гуглим мне примеры ато я маленько поискал и мне стало влом дальше искать!" ????

psywalker · June 23, 2011

Т.е., ты предлагаешь нам за тебя погуглить или написать тебе готовый код?

Да, видимо человек именно этого хочет. Ну что, тогда кто будет писать, ты или я? Предоставляю тебе выбор. :rolleyes:

ctpz · June 23, 2011

Я напишу. У меня есть готовые наработки. Завтра прямо сюда выложу ссылку на страницу демонстрации.

Edited June 23, 2011 by ctpz

Int · June 23, 2011

При желании не так уж и сложно это реализовать.

Spidey · June 23, 2011

Я напишу. У меня есть готовые наработки. Завтра прямо сюда выложу ссылку на страницу демонстрации.

Ок! Спс

При желании не так уж и сложно это реализовать.

Если я прошу примеров, тут нужно включить мозг, значить я учусь, и пытаюсь в чем-то разобраться! Думаю для среднестатистического ума это не сложно понять!

Здравствуйте господа! Хотел поинтересоваться сталкивался ли кто с меню, особенность которого в том, что:
Разделы основного меню расположены вертикально друг под другом, а под меню с различными эффектами выезжает справа или слева при навидении на определенный пункт основнго меню!
Если у кго есть какая инф, буду очень рад примерам!
Спасибо
PS. гуглил, требуемого ничего не нашел!
Т.е., ты предлагаешь нам за тебя погуглить или написать тебе готовый код?

Т.е., ты предлагаешь нам за тебя погуглить или написать тебе готовый код?
Да, видимо человек именно этого хочет. Ну что, тогда кто будет писать, ты или я? Предоставляю тебе выбор.

На форуме запрещено:

1. Игнорирование правил форума.

2. Нецензурные выражения, в том числе завуалированные.

3. Оскорбления участников форума.

Админы, а НАРУШАЕТЕ!

4. Публикация персональных данных участников без их разрешения.

5. Реклама и спам во всех проявлениях.

6. Публикация темы с нарушением правил создания новой темы.

7. Сообщения, пропагандирующие тоталитарные религиозные секты и общества.

8. Публичное осуждение действий администрации, которые априори являются правильными.

9. Цитирование личной переписки (приватом или e-mail'ом) одних участников форума с другими без явного согласия обеих сторон.

10. Создание множественных учетных записей одной персоны.

11. Игнорирование просьб модераторов.

12. Неадекватное поведение

"Помните, тут не делают работу за вас, тут помогают в изучении технологий и обмениваются опытом"

Вот я как раз и хочу, что бы поделились опытом! Так что господа админы, нету опыта, разумно не соваться!

Свою правоту я вам аргументировал! Теерь можете вполне воспользоваться своим правом "Администратор в праве удалять без предупреждения и обоснования любое сообщение на форуме."

PS. на будущее, почаще перечитывайте, то, что сами же и установили!

ctpz · June 23, 2011

Закончил раньше. Вот один из вариантов:

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> 
<title></title> 
<script type="text/javascript"> 
$(document).ready(function(){
	$(".navigation li").hover(function() {   
       $(this).find(".submenu").slideDown("normal");
	},function() {
	  $(this).find(".submenu").hide('normal');      
	}    
    ); 
});
</script> 
<style type="text/css"> 
body {
	margin: 0; padding: 0;
	font: 10px normal Arial, Helvetica, sans-serif;

}
ul.navigation {
	list-style: none;
	padding: 0 20px;	
	margin: 0;
	float: left;
	width: 950px;
	background: #222;
	font-size: 1.2em;
	background: url(http://weburoki.com/lessons/jQuery/images/navigation_bg.gif) repeat-x;
}
ul.navigation li {
	float: left;
	margin: 0;	
	padding: 0 15px 0 0;
	position: relative; 
}
ul.navigation li a{
	padding: 10px 5px;
	color: #fff;
	display: block;
	text-decoration: none;
	float: left;
}
ul.navigation li a:hover{
	background: url(http://weburoki.com/lessons/jQuery/images/navigation_hover.gif) no-repeat center top;
}
img.navigation {
    float:left; 
    width: 7px;
     height: 7px; 
     margin-top: 15px;
}
ul.navigation li ul.submenu {
	list-style: none;
	position: absolute; 
	left: 0; top: 35px;
	background: #333;
	margin: 0; padding: 0;
	display: none;
	float: left;
	width: 170px;
	-moz-border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	border: 1px solid #111;
}
ul.navigation li ul.submenu li{
	margin: 0; padding: 0;
	border-top: 1px solid #252525; 
	border-bottom: 1px solid #444; 
	clear: both;
	width: 170px;
}
 ul.navigation li ul.submenu li a {
	float: left;
	width: 145px;
	background: #333 ;
	padding-left: 20px;
}
ul.navigation li ul.submenu li a:hover { 
	background: #222 url(http://weburoki.com/lessons/jQuery/images/pointer.gif) no-repeat 10px center; 
}
</style> 
</head> 
<body> 
        <ul class="navigation"> 
            <li><a href="#">Главная</a></li> 
            <li> 
                <a href="#">Уроки</a><img class="navigation" src="http://weburoki.com/lessons/jQuery/images/pointer_2.gif">
                <ul class="submenu"> 
                    <li><a href="#">HTML</a></li> 
                    <li><a href="#">CSS</a></li> 
                    <li><a href="#">PHP</a></li> 
                    <li><a href="#">MySQL</a></li>
                    <li><a href="#">Javascript</a></li> 
                </ul> 
            </li>          
            <li><a href="#">Форум</a></li> 
            <li><a href="#">Статьи</a></li>
              <li> 
                <a href="#">Услуги</a><img class="navigation" src="http://weburoki.com/lessons/jQuery/images/pointer_2.gif">
                <ul class="submenu"> 
                    <li><a href="#">Создание сайта</a></li> 
                    <li><a href="#">Дизайн</a></li> 
                    <li><a href="#">Верстка</a></li> 
                    <li><a href="#">Оптимизация</a></li>             
                </ul> 
            </li>  
            <li><a href="#">Контакты</a></li> 
            <li><a href="#">О компании</a></li> 
        </ul> 
</body> 
</html>

Извините, если не в точку. Не совсем понял начало темы.

Edited June 23, 2011 by ctpz

s0rr0w · June 23, 2011

Админы, а НАРУШАЕТЕ!

Мда, чем именно нарушаем? Если не будет четкого и вразумительного ответа, засчитаю как наезд на администрацию.

Spidey · June 23, 2011

Админы, а НАРУШАЕТЕ!
Мда, чем именно нарушаем? Если не будет четкого и вразумительного ответа, засчитаю как наезд на администрацию.

Можете расценивать это хоть как наезд на правительство! Вы отвечаете не по теме вопроса! Ваши сообщения были оскорбительны! Так как через то, что вы не увидели в моей теме то что хотел донести до людей, вы писали бессмысленные сообщения!

Здравая логика, если вопрос не ясен уточните в вежливой форме! А подобными действиями вы как минимум засоряете тему!

Как мы можем наблюдать, другие люди поняли что я хотел! Я даже процитирую "ctpz" который написал "Я напишу. У меня есть готовые наработки. Завтра прямо сюда выложу ссылку на страницу демонстрации. ", а теперь часть своего сообщения "...Хотел поинтересоваться сталкивался ли кто с меню, особенность..."

Человек просто внятно прочитал сообщение!

А вы сейчас пытаетесь безосновательно, что вам естественно и полагается, наехать на участника форума! Мое мнение - "Ваши действия не компетентны!"

Все аргументы и факты на лицо, и я вам их предоставил! Больше эту тему раздувать не собираюсь, не за этим сюда пришел! Если у вас есть свое мнение, пожалуйста! Оставайтесь при нем, больше не собираюсь ничего доказывать!

Извините, если не в точку. Не совсем понял начало темы.

Просмотрю и сразу отпишусь сюда о результате!

Наперед спасибо за внимание!

Int · June 23, 2011

Хоть бы указал, какую технологию изучаешь. Тебе вон jQuery привели в пример, он подходит?

Что-то приблизительно такое. Писал из головы, нигде не проверял. Наверное, есть куча ошибок. Я себе сделал похожую штуку, но там есть задержка перед началом выдвигания и уезжания, да и вообще длиннющий код получился, так что публиковать не буду.

<ul id="menu">
<li onmousover="showsub(1)" onmouseout="hidesub(1)">текст меню</li>
<li onmousover="showsub(2)" onmouseout="hidesub(2)">второй текст меню</li>
</div>
<div id="submenu1">Текст</div> <!-- Изначально скрыты на нужной высоте. И вообще, находятся внутри <li> скорее всего-->
<div id="submenu2">Текст</div>


var SlidingInProcess=0;
var hndl;
function slide(elem)
{
var lft=-elem.outerWidth;    //Начальное значение, из которого начинается выезд
if (elem.style.left)
  var lft=parseInt(elem.style.left);
var menu=document.getElementById('menu');
var MenuRightSide=parseInt(menu.style.left)+menu.outerWidth;     //style.left скорее всего будет пустым, поэтому лучше использовать computedStyle
if (lft <= MenuRightSide+5)  //Выезжаем на 5 (5-12 на самом деле, поскольку прирост идёт по 8) пикселей дальше правого края меню
   elem.style.left=(lft+8)+'px';
else {elem.style.left=(MenuRightSide+5)+'px'; SlidingInProcess=0; clearInterval(hndl);}
}

function showsub(n)
{
var sub=document.getElementById('submenu'+n);
if (!SlidingInProcess)
{
  SlidingInProcess=1;
  hndl=setInterval(function() {slide(sub);},300);
  sub.style.display='block';
}
}
function hidesub(n)
{
if (hndl) {clearInterval(hndl);SlidingInProcess=0;}
var sub=document.getElementById('submenu'+n);
sub.style.left=-sub.outerWidth+'px';       //Вместо этих двух строк делается уезжаение меню, если это нужно
sub.style.display='none';
}

buddah · June 24, 2011

http://www.webanddesigners.com/33-jquery-tutorials-to-create-navigation-menu/

на любой цвет и вкус..

Edited June 24, 2011 by buddah

Sign In

Выдвигающееся подменю

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Обсуждения

Important Information