| |
|
|
| | Модерам - переместите в HTML форум - перепутал
Хочу сам создать простое динамическое меню на основе списка. У меня есть готовый код для этого меню, но там не все мне нравится и я не все в том коде понимаю.
Во-первых меня интересует как изменить расстояния между строками списка и растояние от левой границы до начала подсписка.
<UL id='tmenu' style='display:block;'>
<li> Меню 1
<ul>
<li><a href='#'>Подменю </a></li>
<li><a href='#'>Подменю </a></li>
<li><a href='#'>Подменю </a></li>
</ul>
</li>
</UL>
|
И еще. Я сразу думал создать такое меню на основе тегов DIV , таким типом:
.menu01{
padding-left:10px;
}
<div id="m01" class="menu" onclick="Menu(this)"> Меню 1</div>
<div id="m01p" class="pmenu" style="display:block">
<div class="menu01"><a href="#"> Подменю </a></div>
<div class="menu01"><a href="#"> Подменю </a></div>
<div class="menu01"><a href="#"> Подменю </a></div>
</div>
|
Не будет ли это проще? | |
| |
|
|
| |
|
|
| |
для: Worldmen
(10.04.2008 в 23:45)
| | | Уж коль играться с DIV-ами, то тогда обыграйте в данном теге атрибут style, конкретно z-index,
например так:
.....
// Прорисовка слоя layer1 (Видимый полностью [6] [Нижний])
print "<div id=layer1 class=fon_layer1 OnClick='ClickLayer1()'; style='z-index:6; width:$div_w6; height:$div_h6; left:$left6; top:$top6;' >
/**
** далее ваш отображаемый модуль
**/
</div>;"
#Прорисовка слоя layer2 (Не видимый полностью [5] [средний] )
.....
#Прорисовка слоя layer6 (Не Видимый полностью [1] слой [верхний])
print "<div id=layer6 class=fon_layer6 OnClick='ClickLayer6()'; style='z-index:1; width:$div_w1; height:$div_h1; left:$left1; top:$top1;' >
/**
** далее ваш отображаемый модуль
**/
</div>;"
|
Такая бирюлька позволит Вам уйти во псевдо- объемы и как результат - от вертикального скролирования страниц Вашего сайта, иногда это удобно. Как показывает практика больше 6- слоев делать не стоит. Так-же выигрыш данного подхода : - Сразу грузите (как в моем примере) 6 разделов сайта; - при переходе по слоям перерисовка производится не всей страницы, а только активного слоя. - Плюс своеобразная навигация.
Но работает не под всеми браузерами. Но для них есть волшебные LAYER-ы.
Ряд своих сайтов именно так и сделал, заказчики довольны работают уж несколько лет.
.... | |
| |
|
|
| |
|
|
| |
для: vitali
(11.04.2008 в 08:11)
| | | Можеш написать ссылки на эти сайты, чтоб посмотреть в действии это меню | |
| |
|
|
| |
|
|
| |
для: vitali
(11.04.2008 в 08:11)
| | | я не понял, зачем нужны z-index , лично я предварительно сделал так:
function Menu(dv){
var mn = dv.id+'p';
var visib = document.getElementById(mn).style.display;
if(visib=='none'){ document.getElementById(mn).style.display="block";}
else { document.getElementById(mn).style.display="none";}
}
function MousOver(dv){
var mn = dv.id;
document.getElementById(mn).style.backgroundColor= "red"; ;
}
function MausOut(dv){
var mn = dv.id;
document.getElementById(mn).style.backgroundColor= "#FFFFFF"; ;
}
<div id=layer1 class=fon_layer1 style='z-index:6; border:solid 1px; width:100px; ' >
<div id="m01" class="menu" onmouseover="MousOver(this)" onmouseout="MausOut(this)"
onclick="Menu(this)" style="cursor:hand; display:block;"> Меню 1 </div>
<div id="m01p" class="pmenu" style="display:block;">
<div class="menu01"><a href="#"> Подменю </a></div>
<div class="menu01"><a href="#"> Подменю </a></div>
<div class="menu01"><a href="#"> Подменю </a></div>
</div>
</div>
<div id=layer6 class=fon_layer6 style='z-index:1; border:solid 1px; width:100px; ' >
<div id="m02" class="menu" onmouseover="MousOver(this)" onmouseout="MausOut(this)"
onclick="Menu(this)" style="cursor:hand; display:block"> Меню 1</div>
<div id="m02p" class="pmenu" style="display:block;">
<div class="menu01"><a href="#"> Подменю</a></div>
<div class="menu01"><a href="#"> Подменю </a></div>
<div class="menu01"><a href="#"> Подменю </a></div>
</div>
</div>
|
| |
| |
|
|
| |
|
|
| |
для: Worldmen
(10.04.2008 в 23:45)
| | | почитайте про CSS | |
| |
|
|
| |
|
|
| |
для: Worldmen
(10.04.2008 в 23:45)
| | | >как изменить расстояния между строками списка и растояние от левой границы до начала подсписка.
ul, li {
margin: 0px;
padding: 0px;
list-style: none;
}
li {
margin-bottom: 10px; /* расстояния между строками списка */
}
ul ul {
margin-left: 50px; /* от левой границы до начала подсписка */
}
|
http://www.htmlbook.ru/ | |
| |
|
|
