Jump to content

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


 Share

Recommended Posts

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

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

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

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

Link to comment
Share on other sites

меню сделай таблицей с классом 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='урл_ссылки'">

Link to comment
Share on other sites

Для начала попытался сделать просто меню. Но почему-то не срабатывает смена цвета при наведении на ячейку таблицы. А разве существует такой псевдо класс 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>

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

Link to comment
Share on other sites

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

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

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

Edited by Jmd
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

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

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

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

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

Edited by Emotion
Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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

Edited by Emotion
Link to comment
Share on other sites

  • 2 weeks later...

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

<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. Как, пока не знаю.

Edited by Emotion
Link to comment
Share on other sites

  • 2 weeks later...

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

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

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

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

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...