Перейти к содержанию
СофтФорум - всё о компьютерах и не только

Построение меню по типу проводника

Emotion

Автор Emotion
в Веб-строительство

 Поделиться

Рекомендуемые сообщения

MaDW

MaDW

Опубликовано
Опубликовано

Построено при помощи CSS и JavaScript

1. Посмотри в код выдерни файлы стиля и скрипта

2. Из кода же вдерни описание таблицы с меню

3. Адаптируй под свои нужды

Ссылка на комментарий
Поделиться на другие сайты
Emotion

Emotion

Опубликовано
  • Автор
Опубликовано

Код слишком запутан. И я плохо знаком с JS. Если можно - пошагово, начиная с построения списка.

Ссылка на комментарий
Поделиться на другие сайты
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Опубликовано
Опубликовано

меню сделай таблицей с классом munu

<table class=menu>

в css сделаем подсветку сделай сам на свой вкус:

table.menu td { background-color: #ffffff }

table.menu td:hover { background-color: #cccccc; text-decoration:underline }

когда в таблице создаёшь ячейки-ссылки добавляй в каждую яваскрипт:

<td onclick="location.href='урл_ссылки'">

Ссылка на комментарий
Поделиться на другие сайты
Emotion

Emotion

Опубликовано
  • Автор
Опубликовано

Для начала попытался сделать просто меню. Но почему-то не срабатывает смена цвета при наведении на ячейку таблицы. А разве существует такой псевдо класс td:hover?

<head>

<style>

table.menu td { background-color: #FFFFFF }

table.menu td:hover { background-color: #CCCCCC; text-decoration:underline }

</style>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>Untitled Document</title>

</head>

<body>

<table class="menu" border="1">

<tr>

<td>

Ссылка 1

</td>

</tr>

<tr>

<td>

Ссылка 2

</td>

</tr>

<tr>

<td>

Ссылка 3

</td>

</tr>

</table>

</body>

</html>

Вообщем пока застял на этом.

Ссылка на комментарий
Поделиться на другие сайты
Jmd

Jmd

Опубликовано
Опубликовано (изменено)

http://www.ppg-ua.pisem.net/

я делал это при помощи Macromedia Dreamwiaver - очень добно. там есть специалная опция. Сразу создается java script для твоего меню.

Если хочешь, могу послать скрипт, а дальше будешь сам мучаться.

Изменено пользователем Jmd
Ссылка на комментарий
Поделиться на другие сайты
Emotion

Emotion

Опубликовано
  • Автор
Опубликовано

Меня интерисует именно то меню.

В принципе оно не сложное. Но я не знаю как изменить свойство display:none на display:block с помощью JS.

Ссылка на комментарий
Поделиться на другие сайты
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Опубликовано
Опубликовано
В принципе оно не сложное. Но я не знаю как изменить свойство display:none на display:block с помощью JS.
Emotion: 
document.getElementById('tagID').style.display = 'block';
Ссылка на комментарий
Поделиться на другие сайты
Emotion

Emotion

Опубликовано
  • Автор
Опубликовано (изменено)

Работает. Но ещё необходимо, чтобы при повторном нажатии менюшка свовачивалась. То есть как-то необходимо проверять состояние меню и в зависимости от состояния, сворачивать или разворачивать его.

Я думаю скрипт должен выполнять такие функции:

1)Объявить переменные, значения которых (1 или 0) будут соответствовать состоянию меню (развёрнутое или свёрнутое)

2)При нажатии на меню должна происходить проверка состояния даного пункта меню

3)Если оно уже открыто - значит его нужно свернуть, если наоборот - то развернуть

Теперь это как-то необходимо реализовать на JS.

Изменено пользователем Emotion
Ссылка на комментарий
Поделиться на другие сайты
Ф@РТОВЫЙ

Ф@РТОВЫЙ

Опубликовано
Опубликовано

Emotion: написал прямо здесь, за качество не отвечаю!

<html><head><title>Menu</title><style>.menu_norm { background-color: #ffffff; color: #0000aa }.menu_sel { background-color: #cccccc; color: #9900ff }.submenu { background-color: #eeeeaa; display:none }.submenu a { text-decoration: none; color: #0000aa }.submenu a:hover {text-decoration: underline; color: #9900ff }</style><script language="javascript"><!--menu_count = 3; //количество элементов менюmenu_open = -1;for(i = 0; i < menu_count; i++) { if(document.getElementById) {obj = document.getElementById('m'+i);objs = document.getElementById('sm'+i); } else if(document.all) {obj = document.all['m'+i];objs = document.all['sm'+i]; } obj.onclick = function() {if(menu_open == i) {  menu_open = -1;  objs.style.display = "none";  obj.className = "menu_norm";  return true;}if(menu_open != -1) {	if(document.getElementById) {	  o = document.getElementById('m'+menu_open);	  os = document.getElementById('sm'+menu_open);	} else if(document.all) {	  o = document.all['m'+menu_open];	  os = document.all['sm'+menu_open];	}	o.className = "menu_norm";	os.style.display = "none";}obj.className = "menu_sel";objs.style.display = "block"; }}//--></script></head><body><table width="100%"><tr><td width="150px"><div class="menu_norm" id="m0">Point 1<div class="submenu" id="sm0"><table width="100%"><tr><td>Sub Point 1</td></tr><tr><td>Sub Point 2</td></tr><tr><td>Sub Point 3</td></tr><tr><td>Sub Point 4</td></tr></table></div></div><div class="menu_norm" id="m1">Point 1<div class="submenu" id="sm1"><table width="100%"><tr><td>Sub Point 1</td></tr><tr><td>Sub Point 2</td></tr><tr><td>Sub Point 3</td></tr><tr><td>Sub Point 4</td></tr></table></div></div><div class="menu_norm" id="m2">Point 1<div class="submenu" id="sm2"><table width="100%"><tr><td>Sub Point 1</td></tr><tr><td>Sub Point 2</td></tr><tr><td>Sub Point 3</td></tr><tr><td>Sub Point 4</td></tr></table></div></div></td><td><!-- твоя страница --></td></tr></table></body></html>
Ссылка на комментарий
Поделиться на другие сайты
Emotion

Emotion

Опубликовано
  • Автор
Опубликовано (изменено)

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

Изменено пользователем Emotion
Ссылка на комментарий
Поделиться на другие сайты
  • 2 недели спустя...
Emotion

Emotion

Опубликовано
  • Автор
Опубликовано (изменено)

Пример работающего меню:

<html>

<head>

<script>

function menu1()

{

if (document.getElementById('1').style.display=="block")

{

document.getElementById('1').style.display="none"

}

else

{

document.getElementById('1').style.display="block"

}

}

function menu2()

{

if (document.getElementById('2').style.display=="block")

{

document.getElementById('2').style.display="none"

}

else

{

document.getElementById('2').style.display="block"

}

}

</script>

</head>

<body>

<ul>

<li onclick="menu1()" style="cursor:default"><a href="#">Пункт основного меню</a>

<ul style="display:none" id="1">

<li>Подпункт

<li>Подпункт

<li>Подпункт

</ul>

<li onclick="menu2()" style="cursor:default"><a href="#">Пункт основного меню</a>

<ul style="display:none" id="2">

<li>Подпункт

<li>Подпункт

<li>Подпункт

</ul>

</ul>

</body>

Суть заключается в динамическом изменении свойства тега <ul> display между значениями "none" и "block" с помощью JavaScript.

Однако всё ещё существует недостаток. При загрузке новой страницы - все подменю сворачиваются. Чтобы этого избежать необходимо как-то хранить состояние меню до нажатия на ссылку. Это можно реализовать с помощью cookies. Как, пока не знаю.

Изменено пользователем Emotion
Ссылка на комментарий
Поделиться на другие сайты
  • 2 недели спустя...
ShproT

ShproT

Опубликовано
Опубликовано

А какой лучше движок использоваться для такого сайта?

Это не имеет значения - скрипты мона запихнуть в любой двиг. Выбирать надо:

1) По потребностям (тоесть в зависимости от того, что собираешься размещать на сайте)

2) По навыку (если ты полный ноль в веб-программировании вабще, то лучше брать готовые, отлаженные движки, с которыми возиться не надо)

Конкретно двиг посоветовать не могу, т.к. юзал только DLE...

Ссылка на комментарий
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
 Поделиться
Перейти к списку тем

  • Последние посетители   0 пользователей онлайн

    • Ни одного зарегистрированного пользователя не просматривает данную страницу
×
×
  • Создать...