R@Me0's BLOG http://www.rame0.ru Мои заметки или блокнот онлайн :) Thu, 05 Jan 2012 22:37:01 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Выпадающее меню средствами только CSS http://www.rame0.ru/2011/12/08/%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%b5-%d0%bc%d0%b5%d0%bd%d1%8e-%d1%81%d1%80%d0%b5%d0%b4%d1%81%d1%82%d0%b2%d0%b0%d0%bc%d0%b8-%d1%82%d0%be%d0%bb%d1%8c%d0%ba%d0%be-css/ http://www.rame0.ru/2011/12/08/%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%b5-%d0%bc%d0%b5%d0%bd%d1%8e-%d1%81%d1%80%d0%b5%d0%b4%d1%81%d1%82%d0%b2%d0%b0%d0%bc%d0%b8-%d1%82%d0%be%d0%bb%d1%8c%d0%ba%d0%be-css/#comments Thu, 08 Dec 2011 15:20:40 +0000 R@Me0 http://www.rame0.ru/?p=688 Вместо краткого введения

Довольно часто мне требуется ставить на сайты вертикальное меню. И, иногда, заказчики просят сделать так, чтобы подменю раскрывалось не как подпункт, а раскрывалось отдельным блоком правее основного меню, его подменю еще правее и так далее…

Я долго искал решения в интернете, но почему то вертикальные выпадающие меню не такие уж популярные, чего не скажешь о горизонтальных, который хоть «пятой точкой» ешь.

Так вот, в очередной раз получив запрос на внедрение именно вертикального выпадающего меню и, опять же, в очередной раз увидев, что ни каких подвижек в этом направлении в сети не делается, я решил все таки выложить в массы свой вариант реализации этой задачи.

Что мне больше всего нравится именно в этой реализации, так это то, что она не требует ни каких JS скриптов. Все реализуется на чистом CSS. Это конечно влечет за собой некоторые недостатки, самый мой нелюбимый из которых это то, что если навести на последний видимый на экране пункт меню, то подменю выпадает уже за экран. Это конечно не смертельно, ведь можно прокрутить экран колесиком, но часть потенциальных клиентов от этого все равно будет теряться. Лечится это подключением JS, но это уже совсем другая история…

К делу

Задача

Сделать выпадающее меню, используя только HTML и CSS.

Реализация

Шаг №1. Сверстать обычное вертикальное меню.

HTML макет у нас будет абсолютно стандартным (ну по крайней мере большинство делает вертикальное меню именно так). А именно, это будет маркированный список, в  каждом пункте которого может быть еще один маркированный список и так далее:

Так выглядит HTML:

<html>
	<head>
		<title>Пример</title>
	</head>
	<body>
		<ul id="sample-menu-1"><li ><a href="#">Пункт 1</a></li>
			<li><a href="#">Пункт 2</a>
				<ul>
					<li><a href="#">Подпункт1</a></li>
					<li><a href="#">Подпункт2</a></li>
				</ul>
			</li>
			<li><a href="#">Пункт 3</a>
				<ul>
					<li><a href="#">Подпункт1</a></li>
					<li><a href="#">Подпункт2</a>
						<ul>
							<li><a href="#">Под-подпункт1</a></li>
							<li><a href="#">Под-подпункт2</a></li>
							<li><a href="#">Под-подпункт3</a></li>
							<li><a href="#">Под-подпункт4</a></li>
						</ul>
					</li>
				</ul>
			</li>
		</ul>
	</body>
</html>

А вот так CSS:

#sample-menu-1{margin:0 0 35px 0; padding:0; list-style:none; background:#fff; width:200px;}
#sample-menu-1 li { min-height:25px; border-bottom:1px solid #aaa; background:#fff;padding:0; margin:0;}
#sample-menu-1 li ul { padding:0; margin:0 0 0 10px;}
#sample-menu-1 a {color:#000; text-decoration:none; display:block; padding: 7px 5px;}
#sample-menu-1 a:hover{ background-color:#e6e6e6;}

 

Выглядеть это будет так:

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

Для этого мы немного дополним уже написанные CSS стили, а так же добавим несколько новых:

#sample-menu-2{margin:0 0 35px 0; padding:0; list-style:none;background:#fff; width:200px;}
#sample-menu-2 li { min-height:25px; border-bottom:1px solid #aaa; position:relative;background:#fff;}
#sample-menu-2 a {color:#000; text-decoration:none; display:block; padding: 7px 5px;}
#sample-menu-2 a:hover{ background-color:#e6e6e6;}
#sample-menu-2 li ul {font-size:8pt; display:none; position:absolute; top:10px; left:190px;  width:200px; background:#fff; border:1px solid #aaa; padding:0; margin:0;}
#sample-menu-2 li ul.open, #sample-menu-2 li:hover ul.open{ display: block; position: relative; top:0; left:0; margin-left:10px;}
#sample-menu-2 li:hover ul {display:inherit;}
#sample-menu-2 li ul li { padding: 0 10px;}
#sample-menu-2 li:hover ul ul {display:none;}
#sample-menu-2 li:hover ul li:hover ul {display:inherit;}
#sample-menu-2 li ul li { padding: 0 10px; border-bottom:1px solid #aaa;}

#sample-menu-2 ul { z-index:10;}
#sample-menu-2 li:hover ul { z-index:30;}
#sample-menu-2 li ul.open li:hover ul { z-index:50;}

В итоге мы получаем вертикальное меню, приемлемого качества:

Полностью закрытое меню Меню с открытым подпунктом

Напоследок хочу заметить, что этот CSS написан для 3-х уровневого вертикального меню. Если в вашем меню более глубокая вложенность, то вам нужно будет дополнить CSS по примеру 3х последних строк моего CSS, т.к. если забыть расставить z-index’ы, то ваши пользователи могут столкнуться с неприятной проблемой, когда раскрытое подменю будет перекрывать собой выпадающее.

]]> http://www.rame0.ru/2011/12/08/%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b5%d0%b5-%d0%bc%d0%b5%d0%bd%d1%8e-%d1%81%d1%80%d0%b5%d0%b4%d1%81%d1%82%d0%b2%d0%b0%d0%bc%d0%b8-%d1%82%d0%be%d0%bb%d1%8c%d0%ba%d0%be-css/feed/ 0 Смена фона страницы при наведении на картинку. http://www.rame0.ru/2011/12/07/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d1%8b-%d0%bf%d1%80%d0%b8-%d0%bd%d0%b0%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d0%b8-%d0%bd%d0%b0-%d0%ba/ http://www.rame0.ru/2011/12/07/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d1%8b-%d0%bf%d1%80%d0%b8-%d0%bd%d0%b0%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d0%b8-%d0%bd%d0%b0-%d0%ba/#comments Wed, 07 Dec 2011 15:49:10 +0000 R@Me0 http://www.rame0.ru/?p=673
Решил поделиться маленьким но очень удобным в некоторых случаях JS скриптом, написанном на jQuery. Все что делает скрипт — меняет фон страницы, при наведении на картинку.

Сам скрипт JS:

	var bgC="#f1eace";
	$(function(){
		$(".hoverElement").hover(
			function(){
				// Меняем фон заданного блока на изображение
				$(".bodyClass").css({'background-color':'','background-image':"url("+$(this).attr("href")+")"});
				// Делаем элементы, при наведении на которые срабатывает скрипт, полупрозрачными, чтобы измененный фон было лучше видно.
				$(".hoverElement").css('opacity',"0.7" );
			},
			function(){
				// Возвращаем старый цвет фона, убираем фоновую картинку
				$(".bodyClass").css({'background-color':bgC,'background-image':""});
				// Убираем прозрачность
				$(".hoverElement").css('opacity',"1" );
			}
		);
	});

Пример HTML:

<html>
<head></head>
<body>
     <div class="bodyClass">
        <a href="myimgpath/img.jpg" class="hoverElement">Наведите, и фон изменится</a>
     </div>
</body>
</html>

 ».hoverElement» — элемент, при наведении на который должен будет сменяться фон. Если вы не хотите ни чего менять в скрипте, то этот элемент должен быть ссылкой на картинку, которую нужно поставить в фон страницы.

 ».bodyClass» - элемент, фон которого нужно заменить.

Вот в принципе и все. Если будут вопросы, оставляйте комментарии.

Пример:

НАВЕДИ НА МЕНЯ
Пример внедрения

]]> http://www.rame0.ru/2011/12/07/%d1%81%d0%bc%d0%b5%d0%bd%d0%b0-%d1%84%d0%be%d0%bd%d0%b0-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86%d1%8b-%d0%bf%d1%80%d0%b8-%d0%bd%d0%b0%d0%b2%d0%b5%d0%b4%d0%b5%d0%bd%d0%b8%d0%b8-%d0%bd%d0%b0-%d0%ba/feed/ 0 Раздача Windows 8 для разработчиков! http://www.rame0.ru/2011/09/14/%d1%80%d0%b0%d0%b7%d0%b4%d0%b0%d1%87%d0%b0-windows-8/ http://www.rame0.ru/2011/09/14/%d1%80%d0%b0%d0%b7%d0%b4%d0%b0%d1%87%d0%b0-windows-8/#comments Tue, 13 Sep 2011 21:11:07 +0000 R@Me0 http://www.rame0.ru/?p=656 Пока смотрел BUILD, по твитеру пришло радостное известие:

Радостное известие для всех Windows девелоперов! Завтра, в 7:00 по Москве, Microsoft начнет раздавать Developer Preview версию своей новой операционнй системы Windows 8. Раздаваться будут как 32 так и 64 разрядные версии операционки, что радует. Плюс ко всему, будет доступна так же версия со встроенной Visual Studio и парой-тройкой готовых программ, для того чтобы вы могли «поиграться» с новой операционкой в полную силу. К сожалению, поддержка ее оказываться пока не будет (скорее всего до выпуска готовой версии, а может только до RC), но приятной новостью стало то, что Microsoft будет выпускать обновления для этой ОС уже на стадии тестирования. Конечно делать это они будут с целью тестирования телеметрии и раздачи обновлений, но это уже не так важно, т.к. я считаю, что свежие багфиксы это всегда хорошо.

Все подробности о функционале обещают сегодня (14 сентября). Так что ждем новостей и 7:00, чтбы скачать Windows 8 вот по этой ссылке.

]]> http://www.rame0.ru/2011/09/14/%d1%80%d0%b0%d0%b7%d0%b4%d0%b0%d1%87%d0%b0-windows-8/feed/ 0 Яндекс и Рамблер — двое из ларца одинаковы серпом. http://www.rame0.ru/2011/08/03/%d1%8f%d0%bd%d0%b4%d0%b5%d0%ba%d1%81-%d0%b8-%d1%80%d0%b0%d0%bc%d0%b1%d0%bb%d0%b5%d1%80-%d0%b4%d0%b2%d0%be%d0%b5-%d0%b8%d0%b7-%d0%bb%d0%b0%d1%80%d1%86%d0%b0-%d0%be%d0%b4%d0%b8%d0%bd%d0%b0%d0%ba%d0%be/ http://www.rame0.ru/2011/08/03/%d1%8f%d0%bd%d0%b4%d0%b5%d0%ba%d1%81-%d0%b8-%d1%80%d0%b0%d0%bc%d0%b1%d0%bb%d0%b5%d1%80-%d0%b4%d0%b2%d0%be%d0%b5-%d0%b8%d0%b7-%d0%bb%d0%b0%d1%80%d1%86%d0%b0-%d0%be%d0%b4%d0%b8%d0%bd%d0%b0%d0%ba%d0%be/#comments Wed, 03 Aug 2011 11:56:45 +0000 R@Me0 http://www.rame0.ru/?p=653 Давно уже замечал, что Яша и Рамблер дают примерно одинаковые позиции одним и тем же сайтам, но не идентичные.

Но вот при последнем сборе стат, увидел поразительную вещь: выдача 100% идентична! Поэтому, думаю, Рамблер (и так не считающийся полноценной ПС) можно совсем сбрасывать со счетов… печально.

Напоследок скрин статы по паре ключей:

Яндекс и Рамблер - братья близнеци

]]> http://www.rame0.ru/2011/08/03/%d1%8f%d0%bd%d0%b4%d0%b5%d0%ba%d1%81-%d0%b8-%d1%80%d0%b0%d0%bc%d0%b1%d0%bb%d0%b5%d1%80-%d0%b4%d0%b2%d0%be%d0%b5-%d0%b8%d0%b7-%d0%bb%d0%b0%d1%80%d1%86%d0%b0-%d0%be%d0%b4%d0%b8%d0%bd%d0%b0%d0%ba%d0%be/feed/ 2 Видео-превью Windows 8 http://www.rame0.ru/2011/07/15/%d0%b2%d0%b8%d0%b4%d0%b5%d0%be-%d0%bf%d1%80%d0%b5%d0%b2%d1%8c%d1%8e-windows-8/ http://www.rame0.ru/2011/07/15/%d0%b2%d0%b8%d0%b4%d0%b5%d0%be-%d0%bf%d1%80%d0%b5%d0%b2%d1%8c%d1%8e-windows-8/#comments Fri, 15 Jul 2011 10:39:30 +0000 R@Me0 http://www.rame0.ru/?p=633 Получил сегодня рассылку от Microsoft с видео показывающем UI готовящейся к выходу (как я понял) в 2012 году операционной системы Windows8! Видео порадовало, особенно в предверии того, что я собирался покупать планшет на базе этой операционки. Теперь подожду ее выхода и 100% куплю себе планшет с Windows8 на борту!

Ссылка на видео на ютубе

]]> http://www.rame0.ru/2011/07/15/%d0%b2%d0%b8%d0%b4%d0%b5%d0%be-%d0%bf%d1%80%d0%b5%d0%b2%d1%8c%d1%8e-windows-8/feed/ 0