Выпадающее меню на CSS

Сегодня расскажу о том как делать красивые меню без использования JavaScript в CSS.

А точнее выпадающее меню. Я рассмотрю самый простой способ. 
Сделаем меню на подобии этого:

Выпадающее меню

Таков будет код HTML:

 <ul id="nav">
  <li><a href="#null">Главная</a></li>
  <li><a href="#null">Контакты</a></li>
  <li><a href="#null">Услуги</a>
   <ul>
    <li><a href="#null">1</a></li>
    <li><a href="#null">2</a></li>
    <li><a href="#null">3</a></li>
   </ul>
  </li>
 </ul>

А сейчас рассмотрим как из этого с помощью CSS получить простейшее выпадающее меню.

CSS:

#nav, #nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #000;
  background: #515151;
  float: left;
  width: 100%;
}
#nav li {
  float: left;
  position: relative;
}
#nav li ul {
  display: none;
}

Убрали буллеты из нашего списка — list-style:none. Украсили меню границей и задним фоном.

При помощи float:left выстроили каждый элемент списка <li> в одну линию. Указав display:none скрыли подменю 2-го уровня. Все элементы списка <ul id="nav"> теперь «плавающие».

Свойства float:left мы указали самому контейнеру. Это избавляет нас от так называемого «схлопывания» списка, но заставляет нижележащие элементы обтекать меню справа. Именно поэтому мы указываем ширину для всего меню 100% — чтобы справа просто не оставалось места.

Далее...

#nav a {
  color: #fff;
  text-decoration: none;
  display: block;
  width: 140px;
  padding: 4px 10px;
}
#nav a:hover {
  color: #000;
  background: #ccc;
}
#nav li:hover {
  background: #333;
}

Сначало мы оформили ссылки (#nav a), чтобы они так сказать были похожи на кнопки.

Каждому элементу <a> мы присвоили свойство display:block, что дало нашим ссылкам ширину и высоту. 

text-decoration:none - убирает подчеркивание (ведь ссылка содержит подчеркивание)

Задали ширину каждой ссылки 140 пикселей (не включая отступы).

Селектор #nav a:hover срабатывает в том случае, когда мы подводим курсор к ссылке,а 

#nav li:hover — когда подводим его к элементу списка.

Сейчас все выглядит как простое меню, следующим шагом мы сделаем как и задуманно его выпадающим.

Мы дописываем к уже существующему правилу:

#nav li ul 

следующие инструкции:

#nav li ul {
  display: none;
  position: absolute;
  background: #333;
  padding: 8px 0;
  width: 158px;
}

position:absolute служит для абсолютного позиционирования подменю относительно элемента <li> верхнего уровня.

#nav li li a {
  width: 138px;
}
#nav li:hover ul {
  display: block;
}

Именно строка display:block для #nav li:hover ul заставляет подменю появиться при подводе курсора к ссылке, сменяя ранее установленный режим (display:none).

Мы создали простейшее выпадающее меню, так же можно добавить 3 уровень меню, фон сделать спрайтами, и таким образом можно создать весьма симпатичное меню:)

Как оптимизировать загрузку изображений для кнопок (CSS)

В CSS мы можем применить псевдо-класс :hover к ссылке и добавить свойства, которые будут задействованы при наведении указателя на ссылку.

a:link, a:visited {
    width: 160px;
    height: 30px;
    display: block;
    overflow: hidden;
    background: url(images/nav1.gif) 0px 0px no-repeat;
}
a:hover, a:active {
    background-position: 0px -30px;
}

Изображение nav1.gif содержит в себе сразу два состояния кнопки, а при наведении меняется положение фона:

Оригинал: How to make Buttons with Hover Load Faster

Надо заметить что эту технику можно применять не только к кнопкам, но и к другим элементам. Например на известном видеохостинге Youtube в одном изображении объединены сразу несколько графических элементов:

Java 4-Ever Trailer

Сегодня посмотрел оч позитивный клип на youtube.com
Особенно понравится Java-кодерам=)

Пару интерестных мелких задачек по C++

В этом посте хочу расмотреть пару интерестных мелких задач по C++ "для тренировки и лучшего понимания"=)
1)Даны две переменных:
int a = 10;
int b = 25;
поменять значения местами без использование дополнительных переменных.
Задачку можно решить арифметически и с помощью битовых операций:
Арифметически:

a=a+b;
b=a-b;
a=a-b;

Используем битовые операции:

a ^= b ^= a ^= b; 

2) Напишите программу умножения двух чисел ЛЮБЫМ способом. условие только одно - НИГДЕ не использовать оператор *
Так же можно решить арифметически:

double b=8;
double c=2.5;
double a=b/(1/c);

3) Найти большее из 2-х чисел, при этом не использовать if, циклов, вспомогательны переменных, различных функций и т.д.

int a, b, c;
c=(a>b)*a+(b>a)*b;

Я думаю понятно как работает=) если выражение в скобках истенное, то скобка возвращает 1, иначе - 0.

4) B вот еще одна коварная задачка =)

int main()
{
    http: //www.google.com/
    return 0;
}

есть ли в данном коде ошибка(компилятором естественно не пользоваться )) )? Если есть, то какая и как исправить, а если нет, то почему?
Ответ таков:
Перед "www" начинается область комментария, то есть дальнейшая область не учитывается.
А вот "http:" рассматривается как обычная метка. Так что ошибки нет!=)

"Hello World"

Наконец-то решил создать свой блог=) Всегда хочеться поделиться с людьми чем-то интерестным, например музыкой, мыслями, прикольными картинками и другими вещицами…

Я, Парахин Сергей, начинающий программист С#. Являюсь студентом 1 курса направления «программная инженерия» (Факультет КН, кафедра ПО ЭВМ, ХНУРЭ).

Конечно же писать буду о программировании, так как я будущий программист=) Также увлекаюсь веб-дизайном и вёрсткой. Имею художественное образование и очень люблю рисовать.

Если будут интерестны мои записи, не забудьте подписать на мой блог=)