Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Крутая Менюшка (https://javascript.ru/forum/dom-window/9429-krutaya-menyushka.html)

KingR 16.05.2010 17:16

Крутая Менюшка
 
Скажите как сделать меню как здесь
http://www.aaronbirchphotography.com
с гармошкой розобралса а випадающее меню не получаетса:-E

Gvozd 16.05.2010 17:31

Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

KingR 16.05.2010 17:38

Gvozd,
ви всегда забухание?

Gvozd 16.05.2010 17:44

не вижу связи между моим алкоголизмом, и моими постами в ваших темах.
они вполне адекватны ситуации, и я в любом состоянии так бы вам ответил.
и многие меня поддержат

Arom 17.05.2010 06:08

Аналогичный вопрос -как сделать такую меню, как здесь: embrus-az.com
PS
Если сможете, дайте сразу код))
Первоначальные основы вроде знаю, по крайней мере, как сделать такую выпадающую мебельную меню, как здесь, знаю...

Gvozd 17.05.2010 10:21

Arom,
отличие между помянутыми вами меню только в наличии анимации
то есть там(обработчик события), где вы просто показываете и позиционируете слой с подменю, вам теперь надо вызывать для него анимацию.
реализовать анимацию с нуля вам поможет статья
также анимация реализована во многих фреймворках, и об использовании ее в каждом из них, есть полным полно статей
в остальном ваша меню не претерпит особых изменений

subzey 17.05.2010 13:29

Кстати, а первый пример в HTML5 можно будет делать и без яваскрипта :)
<style type="text/css">
#menu { table-layout: fixed; border-collapse: collapse; border: none 0px; width: 500px; height: 100px}
#menu td { border: none 0px; overflow: hidden; width: 100px; padding: 0px; 	
	-o-transition: width 0.3s;
	-moz-transition: width 0.3s;
	-webkit-transition: width 0.3s;
	transition: width 0.3s;
}
#menu:hover td { width: 75px; }
#menu td:hover { width: 200px; }
.menu-item { display: block; height: 100px; width: 200px; }
.menu-item-1 {background: yellow}
.menu-item-2 {background: green}
.menu-item-3 {background: blue}
.menu-item-4 {background: orange}
.menu-item-5 {background: purple}
</style>

<table id="menu">
	<tr>
		<td><a class="menu-item menu-item-1" href="#"></a></td>
		<td><a class="menu-item menu-item-2" href="#"></a></td>
		<td><a class="menu-item menu-item-3" href="#"></a></td>
		<td><a class="menu-item menu-item-4" href="#"></a></td>
		<td><a class="menu-item menu-item-5" href="#"></a></td>
	</tr>
</table>

Посмотреть можно в свежих Опере, Сафари и Хроме. В Файрфоксе не заработало, в ИЕ и не заработает.

KingR 17.05.2010 16:06

я гармошку сделал
а вот как сделать чтоб при кликание на етот цветной квадрат снизу появлялась еще типу галереи или как ето називаетса?

Skipp 17.05.2010 16:14

Цитата:

Сообщение от subzey (Сообщение 55455)
В Файрфоксе не заработало

Хм у меня работает. FF 3.6.3, правда не до конца, так как нужно, но хоть как-то)

JsLoveR 27.05.2010 00:34

subzey,
прикольно))


Часовой пояс GMT +3, время: 22:59.