Модераторы: Sardar, Aliance
  

Поиск:

Добавить материал
 

Скрипт выпадающего меню
battrack
Репутация: нет
Всего: нет

Профиль
Быстрая цитата Цитата
Теги:
Всем привет! 
Очень нужна помощь.
Может кто-нибудь подкинет скрипт выпадающего меню (вертикального или горизонтального). Порылся в инете, но почему-то так и не нашел ничего 
интересного (то слишком сложно, а я не очень-то знаю java, то слишком коряво). Если кто-то сможет подкинуть несложный скрипт в котором можно было 
разобраться (поменять цвета, размеры, добавить или удалить пункты меню), был бы очень признателен!


Комментарии посетителей:


Дата 29.7.2008, 18:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
MCTarakan   Репутация: нет  Всего: нет 
DHTML Menu - очень удобная програмка smile

http://www.sothink.com/product/dhtmlmenu/index.htm
PM MAIL WWW   Вверх

Дата 27.9.2012, 11:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
RomanDadon   Репутация: нет  Всего: нет 
Код

<html>

<head>
<title>Выпадающее меню на javascript</title>
<style>

body { font-family: verdana, sans-serif; font-size:13px; margin:0px; padding:0px;
background:#ADE7F1;}

.menu { background:#C4C2F8; width:100%; }

#block_menu { margin-left:5px; }
.punkt {float:left; padding: 1px 1px 0px 1px; background:transparent; position:relative; cursor:pointer; }
.punkt div {padding:2px 7px 2px 7px;}
div.list_punkts {background:red; position:absolute; top:26px; left:0px;
display:none; padding:0px; width:180px; border:solid 1px #000; }
div.list_punkts div.kont {padding:0px;margin:3px; /*background:#blue;*/ }

div.list_punkts a {text-decoration:none; padding:0px; cursor:pointer; color:#white;}
div.list_punkts div a div.podpunkt { /*background:#FF8000;*/ width:100%; padding:0px; margin-top:2px; }

div.list_punkts div a div.podpunkt div { width:100%;padding:0px 0px 0px 2px; white-space:pre;}

div.list_punkts div a:hover { background:#yelow; }
div.list_punkts div a:hover div.podpunkt { background:#red; color:#black; }
.footer_menu { clear:both; }

</style>
</head>
<body>

<script type="text/javascript">

function overPunkt(obj_listPunkt)

/* делаем выпадающее меню видимым */ 
obj_listPunkt.childNodes[1].style.display="block"; 
/* ставим выпадающее меню ниже пункта меню */
obj_listPunkt.childNodes[1].style.top=obj_listPunkt.offsetHeight; 
/*дальше идет оформление пункта меню */ 
obj_listPunkt.style.background="#8080FF";
obj_listPunkt.style.padding=0;
obj_listPunkt.childNodes[0].style.border="solid 1px #000";
obj_listPunkt.childNodes[0].style.borderBottom="none";
/* запоминаем цвет текста пункта меню, чтоб потом его можно было восстановить */ 
color_text=obj_listPunkt.style.color;
obj_listPunkt.style.color="#red";
}

function outPunkt(obj_listPunkt)

/* делаем выпадающее меню невидимым */ 
obj_listPunkt.childNodes[1].style.display="none";
/* дальше восстанавливаем первоначальный внешний вид пункта меню */
obj_listPunkt.style.background="blue";
obj_listPunkt.style.padding=1;
obj_listPunkt.style.paddingBottom=0;
obj_listPunkt.childNodes[0].style.border="none";
obj_listPunkt.style.color=color_text;
}

</script>

<div class="menu">
<div id="block_menu">

<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div>Лабораторные</div
><div class="list_punkts"><div class="kont">
<a href="13_1.html"><div class="podpunkt"><div><Бегущая строка</div></div></a>
<a href="13_2.html"><div class="podpunkt"><div>Часы</div></div></a>
<a href="13_21.html"><div class="podpunkt"><div>Остановка часов</div></div></a>
<a href="#"><div class="podpunkt"><div>Лабораторные</div></div></a>
</div></div>
</div>

<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div>Веб-дизайн</div
><div class="list_punkts"><div class="kont">
<a href="http://www.linedmk.com"><div class="podpunkt"><div>Основы</div></div></a>
<a href="#"><div class="podpunkt"><div>Статьи</div></div></a>
<a href="#"><div class="podpunkt"><div>Литература</div></div></a>
<a href="#"><div class="podpunkt"><div>Приемы и примеры</div></div></a>
<a href="#"><div class="podpunkt"><div>Частые ошибки</div></div></a>
</div></div>
</div>

<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div>JavaScript</div
><div class="list_punkts"><div class="kont">
<a href="#"><div class="podpunkt"><div>Основы</div></div></a>
<a href="#"><div class="podpunkt"><div>Литература</div></div></a>
<a href="#"><div class="podpunkt"><div>Статьи</div></div></a>
<a href="#"><div class="podpunkt"><div>Скачать скрипты</div></div></a>
</div></div>
</div>

<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div>PHP</div
><div class="list_punkts"><div class="kont">
<a href="#"><div class="podpunkt"><div>Основы</div></div></a>
<a href="#"><div class="podpunkt"><div>Литература</div></div></a>
<a href="#"><div class="podpunkt"><div>Статьи</div></div></a>
<a href="#"><div class="podpunkt"><div>Скачать скрипты</div></div></a>
</div></div>
</div>

<div class="punkt" onMouseOver="overPunkt(this);" onMouseOut="outPunkt(this);"><div>Новости</div
><div class="list_punkts"><div class="kont">
<a href="#"><div class="podpunkt"><div>За последнюю неделю</div></div></a>
<a href="#"><div class="podpunkt"><div>За месяц</div></div></a>
<a href="#"><div class="podpunkt"><div>Все</div></div></a>
</div></div>
</div>

</div>
<div class="footer_menu"></div>
</div>

</body>
</html>


Вот вам выпадающее меню.)


Это сообщение отредактировал(а) Aliance - 27.9.2012, 14:54
PM MAIL   Вверх

Дата 14.11.2012, 07:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
shurikv   Репутация: нет  Всего: нет 
Очень понравилось! Коротко и понятно. Отсутствие ЭУ (элементов управления) в HTML меня удивляет. Может сделать что-то вроде библиотеки, где были бы собраны стандартные ЭУ?
Я постарался доработать полученный вариант, чтобы было удобней редактировать меню, навесил побольше комментариев. 
Предлагаю желающим дорабатывать и улучшать.
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
    <head>
        <title>
            мое меню
        </title>
        <meta http-equiv="content-type" content="text/html; charset=windows-1251" />
        <script type="text/javascript">
        // список главного меню(GM), всех подменю (PM) и адресов-ссылок (AD)
        var GM = ['Первый','Второй','Третий','Четвертый','Пятый'],PM ={},AD = {};
        PM[0] = ['1_Первый','2_Второй','3_Третий','4_Четвертый','5_Пятый'];
        AD[0] = ['000.php','000.php','000.php','000.php','000.php'];
        PM[1] = ['01_Первый','02_Второй','03_Третий','04_Четвертый','05_Пятый','06_Шестой','07_Седьмой'];
        AD[1] = ['000.php','000.php','000.php','000.php','000.php','000.php','000.php'];
        PM[2] = ['001_Первый','002_Второй','003_Третий','004_Четвертый'];
        AD[2] = ['000.php','000.php','000.php','000.php'];
        PM[3] = ['0001_Первый','0002_Второй','0003_Третий'];
        AD[3] = ['000.php','000.php','000.php'];
        PM[4] = ['00001_Первый','00002_Второй','00003_Третий','00004_Четвертый','00005_Пятый'];
        AD[4] = ['000.php','000.php','000.php','000.php','000.php'];
        var y0 = '28px', x0 = '10px'; // cмещение вниз и вправо от пункта главного меню
        // формируем меню
        function zmnu(){
            var tt = '', jm = GM.length;
            for (var j=0;j<GM.length;j++){
                tt +='<div class="gmnu" id="m'+j+'" onmouseover="activ(this);" onmouseout="hide(this);">'+GM[j];
                tt +='<div class="pmnu" id="pm'+j+'">';
                for (var i=0;i<PM[j].length;i++){tt +='<div><a href="'+AD[j][i]+'">'+PM[j][i]+'</a></div>';}
                tt +='</div></div>';
            }
            document.getElementById('menu').innerHTML = tt;
        }
        // активируем подменю
        function activ(el){
            el.style.border = '1px solid #ff0000';        // меняем цвет рамки выбранного пункта
            //el.style.background = '#ff77ff';              // меняем цвет фона или заливку url('000.gif')
            var pm = document.getElementById('p'+el.id);  // получаем ссылку на контейнер с подменю
            pm.style.top = y0; pm.style.left = x0; pm.style.display="block"; // смещаем и показываем
        }
        function hide(el){
        el.style.border = '1px solid #0000ff';          // возвращаем цвет рамки выбранного пункта
        //el.style.background = '#ffaaff';                // возвращаем цвет фона
        document.getElementById('p'+el.id).style.display="none";  // скрываем подменю
        }
        </script>
    </head>
    <body onload="zmnu()">
            <div id="menu"></div> <!--в этот элемент мы поместим наше меню-->
    </body>
    <style>
        #menu {position:fixed; top:20px; left:200px}               /* задаем позицию контейнера главного меню */
        .gmnu{border:1px solid #0000ff; background:url('000.gif'); /* задаем цвет рамки и заливку главного меню */
                color: #000000; font-size: 24px;                       /* цвет и размер шрифта*/
                padding: 1px 8px 1px 8px; height:26px;                 /* отступы и высота меню (надо согласовывать с y0)*/
                position:relative; float:left; cursor:pointer}
        .pmnu{border:1px solid #00ff00; position:absolute; display:none;} 
        .pmnu div{border-bottom:1px solid #00ff00; background: url('000.gif')} /* задаем цвет рамки и заливку подменю*/
        .pmnu a {text-decoration:none;padding: 1px 8px 1px 8px; height:26px;   /* отменяем подчеркивание у ссылки*/
                color: #000000; font-size: 18px}     /* цвет и размер шрифта невыделенного подменю*/
        .pmnu a:hover{background-color:#aaffaa;  /* линия-разделитель в подменю*/
                color: #0000ff;}                     /* цвет шрифта выделенного подменю*/
    </style>
</html>

PM MAIL   Вверх

  Дата 25.11.2012, 11:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
Sanchezzz ***   Репутация: нет  Всего: 60 
Я когда вижу такие менюшки мое лицо попадает в искривленное пространство   smile 

PM MAIL   Вверх

Дата 3.12.2012, 11:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата
shurikv   Репутация: нет  Всего: нет 
Внешний вид конечно не ахти. Поэтому занялся дизайном и сделал как у DrWeb. Даже выпадение и исчезновение подменю теперь плавное. Если интересно разархивируй и смотри.

Присоединённый файл ( Кол-во скачиваний: 4 )
Присоединённый файл  GM.rar 23,96 Kb
PM MAIL   Вверх

  
 
Здесь публикуют скрипты, которые уже проверены в обсуждениях других тем (при этом полезно поставить ссылки на все смежные обсуждения) или переносятся кем-либо из модераторов по просьбе участников, если видно, что в результате обсуждения темы был написан полезный или интересный скрипт. Третий возможный вариант - участник форума публикует скрипт, заведомо известный как полезный и эффективный, для, возможно, небольшой доработки и обсуждения.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Наши скрипты | Следующая тема »


 




[ Время генерации скрипта: 0.0682 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.