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



 

Здравствуйте, гость (

| Вход | Регистрация )

4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
> Выпадающее меню?
red-nicolas
red-nicolas
Topic Starter сообщение 26.12.2007, 15:34; Ответить: red-nicolas
Сообщение #1


Подскажите, как с помощью скриптов сделать меню, что бы при наведении мыши на однby из пунктов меню открывалось под меню?
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 26.12.2007, 15:50; Ответить: Exterior
Сообщение #2


red-nicolas, простое меню, которое при желании может стать графически красивым:
<html>
<head>

<title>Menu by HTML.BY team </title>

<style type="text/css">
a { font-family: Verdana, Arial; color: white; text-decoration: none; font-weight:bold; }
a:hover { color: white; text-decoration: none; font-weight:bold; background-color:silver;}
#box {position:absolute;visibility:hidden;layer-background-color:silver }
#blackbox { font-family: Verdana, Arial; font-size:8pt; color: white; background-color:black; text-decoration: none }
#mnubar { font-family: Verdana, Arial; font-size:10pt; color: white; font-weight:bold; text-decoration: none }
</style>

<script language="JavaScript">
ns=window.navigator.appName == "Netscape"
ie=window.navigator.appName == "Microsoft Internet Explorer"

function openIt(x) {
if(ns) {
showbox= document.layers[x+1]
showbox.visibility = "show"
showbox.top=44
var items = 5
for (i=1; i<=items; i++) {
elopen=document.layers[i]
if (i != (x + 1)) {
elopen.visibility = "hide" }
}
}

if(ie) {
curEl = event.toElement
curEl.style.background = "silver"

showBox = document.all.box[x];
showBox.style.visibility = "visible";
showBox.style.top = 40;

var items = 5
for (i=0; i<items; i++) {
elOpen=document.all.box[i]
barEl=document.all.mnubar[i]
if (i != x){
elOpen.style.visibility = "hidden"
barEl.style.background = "#000000"
}
}
}
}

function closeIt() {
var items = 5
for (i=0; i<items; i++) {
if(ie){
document.all.box[i].style.visibility = "hidden"
barEl=document.all.mnubar[i]
barEl.style.background = "#000000"
}
if(ns){ document.layers[i+1].visibility = "hide"}
}
}

</script>

</head>

<body link="#008000" marginwidth="0" marginheight="0" topmargin="0" leftmargin="0">

<table border="0" cellpadding="0" cellspacing="0" width="170" bgcolor="#000000" id=mainmenu height="40">
<tr><td align="center" bgcolor="#ffffff" colspan="5" bordercolor="#EEE1BC">&nbsp;</td></tr>
<tr>

<td align="center" nowrap width="80">
<a href="#" onMouseOver="openIt(0)" id=mnubar>Меню 1</a></td>

<td align="center" nowrap width="80">
<a href="#" onMouseOver="openIt(1)" id=mnubar>Меню 2</a></td>
</tr>
</table>
<br><br>

<div onMouseOver="closeIt()" >
<layer onmouseover="closeIt()">


</layer>
</div>

<!-- Меню -->

<div id=box style=left:0>
<table border="0" id=blackbox width="80">
<tr><td><a href='http://www.html.by/'>Ссылка 1</a></td></tr>
<tr><td><a href='http://www.html.by/'>Ссылка 2</a></td></tr>
</table>
</div>


<!-- Меню -->

<div id=box style=left:90>
<table border="0" id=blackbox width="80">
<tr><td><a href='http://www.html.by/'>Ссылка 1</a></td></tr>
<tr><td><a href='http://www.html.by/' >Ссылка 2</a></td></tr>
</table>
</div>

<p></p>
<p></p>
<p></p>
<p></p>


<P><FONT size=1>
<script
language=JavaScript><!--
function closeIt() {
close();
}
// -->
</SCRIPT>
</FONT></P>

</body>

</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
T0xA
T0xA
сообщение 13.1.2008, 1:58; Ответить: T0xA
Сообщение #3


вот очень простой способ
впринципе js нужен только для IE.
свойства в css можно задать любые.
прикол в том что при наведении на li ("li:hover") происходит:
#menu li:hover ul{ display:block;}
а так #menu ul{ display:none;}


html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<title>...</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style media="all" type="text/css">@import "css/all.css";</style>
<script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
<ul id="menu">
<li><a href="#">menu1</a></li>
<li>
<a href="#">menu2</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
</ul>
</li>
<li>
<a href="#">menu3</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
</ul>
</li>
<li><a href="#">menu4</a></li>
</ul>
</body>
</head>


css:
...
#menu, #menu ul{
margin:0;
padding:0;
list-style:none;
}
#menu{
background:#081040;
float:left;
width:740px;
}
#menu li{
display:inline;
float:left;
margin:0 13px;
}
#menu li.business-lounge{
margin-left:84px;
}
#menu li a{
text-decoration:none;
line-height:20px;
color:#fff;
}
#menu li a:hover{
text-decoration:underline;
}
#menu ul{
background:#081040;
display:none;
position:absolute;
left:-10px;
top:20px;
}
#menu ul li{
clear:both;
margin:0;
}
#menu ul li a{
font-size:10px;
background:#fff;
display:block;
line-height:14px;
color:#081040;
width:120px;
margin:0 1px 1px;
padding:4px 3px;
}
#menu ul li a:hover{
text-decoration:none;
background:#e2eaff;
}
#menu li.hover ul,
#menu li:hover ul {
display:block;
}
#menu li.hover,
#menu li:hover {position: relative;}
...


js :
function initMenu()
{
var nodes = document.getElementById("menu").getElementsByTagName("li");
for (var i=0; i<nodes.length; i++)
{
  nodes[i].onmouseover = function()
  {
   this.className += " hover";
  }
  nodes[i].onmouseout = function()
  {
   this.className = this.className.replace(" hover", "");
  }
}
}
if (document.all && !window.opera) attachEvent("onload", initMenu);
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
nadin_od
nadin_od
сообщение 28.7.2008, 16:04; Ответить: nadin_od
Сообщение #4


подскажите пожалуйста... как сделать так, чтоб выпадающее меню было одно справа, другое слева, а выпадали под-менюшки посередине между ними?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
nadin_od
nadin_od
сообщение 28.7.2008, 16:09; Ответить: nadin_od
Сообщение #5


или другой вариант... чтоб при наведении на ссылку менюшки (и правой левой) выпадал посередине блок с текстом (типа описание что в ссылке)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Webmaster_hb
Webmaster_hb
сообщение 28.7.2008, 17:07; Ответить: Webmaster_hb
Сообщение #6


nadin_od, может приведете пример, или нарисуете как это должно выглядеть ?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
nadin_od
nadin_od
сообщение 29.7.2008, 0:39; Ответить: nadin_od
Сообщение #7


спасибо за внимание к вопросу)) сама его уточнила и поняла, что пишу не в той теме. смотрю сейчас по форуму темы с всплывающими окнами.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
byte_hb
byte_hb
сообщение 28.9.2008, 22:30; Ответить: byte_hb
Сообщение #8


(Webmaster_hb @ 28.7.2008, 20:07) *
нарисуете как это должно выглядеть ?


А мне можете подобное подсказать? :rolleyes:

Хочу примерно следущее...

[IMG]http://www.ii4.ru/images/331422example.jpg[/IMG]
то есть:
- есть главное меню, в нем несколько подпунктов, двух типов с подпунктами далее или без (тоесть ссылка на раздел форума или файл)...
- возле каждого подменю есть рисунок(или символ), отличающий его от конечной ссылки
- при наведении на имя раздела\пункта он меняет цвет...
но при его открытии цвет остается измененный;


Помогите, если найдете время
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Exterior
Exterior
сообщение 28.9.2008, 23:29; Ответить: Exterior
Сообщение #9


byte, вот примерчик многоуровневого меню:
<!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>Многоуровневое CSS меню</title>

<style type="text/css">
<!--
.suckerdiv ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}

.suckerdiv ul li {
position: relative;
}

/*Sub level menu items */
.suckerdiv ul li ul {
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}

/* Sub level menu links style */
.suckerdiv ul li a {
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

.suckerdiv ul li a:visited {
color: black;
}

.suckerdiv ul li a:hover {
background-color: yellow;
}

.suckerdiv .subfolderstyle {
background: url(arrow-list.gif) no-repeat center right;
}

/* Holly Hack for IE \*/
* html .suckerdiv ul li {
float: left;
height: 1%;
}

* html .suckerdiv ul li a {
height: 1%;
}
/* End */
-->
</style>

<script type="text/javascript">
var menuids=["suckertree1"]

function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i])
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px"
else
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px"
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}

if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>

</head>

<body>

<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Главная</a></li>
<li><a href="#">Портфолио</a></li>
<li><a href="#">Статьи</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">PHP</a>
<ul>
<li><a href="#">PHP 4</a></li>
<li><a href="#">PHP 5</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">CSS</a></li>
</ul>
</div>

</body>
</html>


изображение к нему: [attachment=35325:arrow-list.gif]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
byte_hb
byte_hb
сообщение 29.9.2008, 1:37; Ответить: byte_hb
Сообщение #10


О, класс, спасибо огромное.

А как можно сделать промежуток между таблицами???
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
4 страниц V   1 2 3 4 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
 1 Викторио_mw 1466 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
 2 boltuk 3409 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите с меню - переделать в выпадающее
 1 lepota 1128 4.12.2017, 13:29
автор: yury_mw
Открытая тема (нет новых ответов) Слайдер под меню
 0 Olya_Poy 4637 29.11.2017, 11:09
автор: -garmoni-
Открытая тема (нет новых ответов) На разных разрешениях меню выглядит по разному
 0 SPiar 4813 28.9.2017, 17:45
автор: -korotkov-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 17.4.2024, 2:35

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet