Меню - Официальный форум Eleanor CMS

Сообщение сайта

(Сообщение закроется через 2 секунды)

Здравствуйте, гость ( Вход | Регистрация )

Официальный форум Eleanor CMS > Для вебмастеров и владельцев сайтов > Комната программистов

Меню, из простого в выдвежное

Опции

Гость_HamBurGer_*

2010-06-18, 21:11

Сообщение #1

Гости

Вот код простого горизонтального меню...а как к нему добавить выпадающие подпункты с помощью css???

<div class="presentbox">
				<ul class="reset platforms">
					<li class="first"><a class="plat-pc" href="/pc/"><img src="<?php echo$theme?>/images/spacer.gif" title="Игры на PC" alt="Игры на PC" /><span>Игры на PC</span></a></li>
					<li><a class="plat-psp" href="/psp/"><img src="<?php echo$theme?>/images/spacer.gif" title="Игры на PSP" alt="Игры на PSP" /><span>Игры на PSP</span></a></li>
					<li><a class="plat-ps2" href="/ps2/"><img src="<?php echo$theme?>/images/spacer.gif" title="Игры на PS2" alt="Игры на PS2" /><span>Игры на PS2</span></a></li>
					<li><a class="plat-xbox" href="/xbox360/"><img src="<?php echo$theme?>/images/spacer.gif" title="Игры на XBOX 360" alt="Игры на XBOX 360" /><span>Игры на XBOX 360</span></a></li>
					<li><a class="plat-mobi" href="/mobilgame/"><img src="<?php echo$theme?>/images/spacer.gif" title="Игры на мобильном" alt="Игры на мобильном" /><span>Игры на мобильном</span></a></li>
					<li><a class="plat-pc" href="/pc/"><img src="<?php echo$theme?>/images/spacer.gif" title="Игры на PC" alt="Игры на PC" /><span>Игры на PC</span></a></li>
					<li><a class="plat-psp" href="/psp/"><img src="<?php echo$theme?>/images/spacer.gif" title="Игры на PSP" alt="Игры на PSP" /><span>Игры на PSP</span></a></li>
					<li><a class="plat-ps2" href="/ps2/"><img src="<?php echo$theme?>/images/spacer.gif" title="Игры на PS2" alt="Игры на PS2" /><span>Игры на PS2</span></a></li>
					<li class="last"><a class="plat-mobi" href="/mobilgame/"><img src="<?php echo$theme?>/images/spacer.gif" title="Игры на мобильном" alt="Игры на мобильном" /><span>Игры на мобильном</span></a></li>
				</ul>

sanes

2010-06-18, 21:34

Сообщение #2

Аноним

Группа: Пользователи
Сообщений: 1 180
Регистрация: 2008-12-29
Из: Волгоград

Репутация:

нет

Всего: 4

Примерно так! В инете масса примеров

Гость_HamBurGer_*

2010-06-18, 21:47

Сообщение #3

Гости

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

Diego

2010-07-01, 8:58

Сообщение #4

Любитель

Группа: Eleanor user
Сообщений: 298
Регистрация: 2008-12-13
Из: Ярославль

Репутация:

нет

Всего: 14

могу помочь аккордион прикрутить за небольшое вознаграждение, но только базовое оформление, цвет, шрифт уж сам будешь править

KeSSLeR

2010-07-01, 9:49

Сообщение #5

Любитель

Группа: Eleanor user
Сообщений: 483
Регистрация: 2010-02-11
Версия системы: RC5

Репутация:

нет

Всего: нет

Нарыл гдето когдато в инете
Неплохое себе меню. Можете всунуть в хтмл файл и посмотреть



<!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>
</head>
<body>
<script type="text/javascript">
shag = 2;
time = 15;
arr_height_menu = new Array();
function visota(id_m){
    var arr_height = new Array();
    var obj = document.getElementById(id_m).getElementsByTagName('div');
    for(var i = 0, len = obj.length; i < len; i++){
        arr_height[i] = obj[i].offsetHeight;
        obj[i].style.height = '0px';
        obj[i].style.overflow = 'hidden';
    }
    arr_height_menu[id_m] = arr_height;
}
function menu_in(id_m){
    id_m_ = id_m;
    obj_menu = document.getElementById(id_m_);
    var obj = obj_menu.childNodes;
    for(var i = 0, len = obj.length, n = 0; i < len; i++){
        if(obj[i].nodeName == 'A'){
            obj[i].onclick = new Function("function2("+n+")");
            n++;
        }
    }
}
function function2(n){
    height_menu = arr_height_menu[id_m_];
    height = height_menu[n];
    var obj = obj_menu.getElementsByTagName('div');
    obj_n = obj[n];
    he = parseInt(obj_n.style.height);
    if(he < height) show_in(); else close_in();
}
function show_in(){
    he += shag;
    obj_n.style.height = he + 'px';
    if(he < height) setTimeout('show_in()', time);
    if(he > height) obj_n.style.height = height + 'px';
}  
function close_in(){
    he -= shag;
    if(he < 0) he = 0;
    if(he < shag) obj_n.style.height = '0px';
    obj_n.style.height = he + 'px';
    if(he > 0) setTimeout('close_in()', time);
}
</script>
<div style="width:170px; border:#000000;" id="mmm" onmouseover="menu_in('mmm');">
  <a href="#">Первый пункт</a>
  <div style="background-color:#FFFFFF;">????? 1 <a href="http://www.wowpe.ru">www.wowpe.ru</a> <br> 123</div>
  <a href="#">Второй пункт</a>
  <div style="background-color:#FFFF99;">sdgsdfgdfgdsf sdfg sdfg fasd fdg as wtqw twtqdf aw wafwarg wgrweg </div>
  <a href="#">Третий</a>
  <div style="background-color:#99FFCC;">sdgs wrt wr tqd wrt qwrt qwfgdt qwr</div>
</div>
<script type="text/javascript"> 
visota('mmm');
</script>

Сообщение отредактировал KeSSLeR - 2010-07-01, 9:51