el_murid (el_murid) wrote,
el_murid
el_murid

Categories:

Анимированое меню

Далее рассмотрим область верхнего меню темы и слегка его анимируем. Анимацию я вставлю в этот блог, что бы далеко не надо было ходить. В разных браузерах его поведение будет разным. В Chrome и FireFox оно движется, в Opera только подсвечивается шрифт. Остальные не проверял. Оригинал http://tastytheme.livejournal.com



Наводим мышь на свободную область меню, в стороне от активного текста меню и определяем название класса к которому принадлежит меню. В данном случае - .header-menu. Так как меню относится к обыкновенному строчному элементу, то высота его определяется высотой строки - line-height.



.header-menu {
line-height: 30px; высота строки
font-family: ; шрифт по умолчанию, либо меняем на свой, вписывая дополнительный параметры. В ЖЖ используем стандартные наборы шрифтов в Юникоде, иначе кириллица работать не будет. Примеры семейств шрифтов:
font-family: Georgia, "Times New Roman", Times, serif;
font-family: Verdana, Geneva, sans-serif;
font-family: "Courier New", Courier, monospace;
font-family: Arial, Helvetica, sans-serif;
font-family: "Times New Roman", Times, serif;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-family: "Arial Black", Gadget, sans-serif;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 12px; размер шрифта
font-weight: bold; в данном случае жирный шрифт или normal
background-color: #323232; цвет заливки фона. Можно использовать градиентную заливку, либо подставить изображение.
border-top: 1px SOLID #777777; размер, стиль и цвет верхней линии
border-bottom: 1px SOLID #000; размер, стиль и цвет нижней линии
margin-top: 0px; внешний отступ от баннера
padding-right: 20px; если выравнивание текста по левому краю, то даем внутренний отступ от левого края монитора на данное растояние, если по центру, то ставим значение в ноль.
padding-left: 0px Собственно, этими параметрами сдвигаем текст меню в нужную нам сторону.
padding-top: 0px; Если они в коде стиля темы не прописаны, прописываем сами нужные параметры.
padding-bottom: 0px;
text-align: center; центрирование текста относительно монитора
}
/*----------------------------------подложка меню--------------------------------*/

.header-menu {
line-height: 30px;
font-family: ;
font-size: 12px;
font-weight: 900;
background-color: #323232;
border-top: 1px SOLID #777777;
border-bottom: 1px SOLID #000;
margin-top: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
text-align: center;
}

/*---таким образом можно оставлять коментарии в коде---*/
/*---чтобы легче было затем в нем разбираться---*/

Внимание!!! Не пишите коментарии в коде кириллицей, иначе стиль будет сваливаться.

Цвет шрифта и ссылки меню

.header-menu a, .header-menu a:visited {
white-space: nowrap; Текст в одну строку
padding: 8px 10px 8px 10px; Внутренние отступы невидимой граници от краев - сверху, справа, снизу, слева. Здесь укороченная пропись кода. Можно писать
padding-top:8px;
padding-right:10px;
padding-bottom:8px;
padding-left:10px;
color: #777; цвет шрифта
text-decoration: none; убираем подчеркивание ссылки по умолчанию
}
/*----------------------------------------------------------*/
.header-menu a, .header-menu a:visited {
white-space: nowrap;
padding: 8px 10px 8px 10px;
color: #777;
text-decoration: none;
}
/*----------------------------------------------------------*/

Подложка меню. Свойство класса на наведение мыши
.header-menu a:hover

Теперь делаем подложку для кнопки меню в фотошопе, заведомо шире самого длинного текста одной и опций самого меню, но высотой в заявленном параметре - line-height: 30px; На наведение мыши, подложка будет плавно выезжать справа налево.



.header-menu a:hover {
background-image: url("http://pics.livejournal.com/tastytheme/pic/0000eb3s"); изображение подложки
background-position: 50% 50%;  центрирование подложки
background-repeat: no-repeat;  запрет на повторение
color: #999; цвет шрифта, слегка светлее обычного.
-webkit-transition:all .5s ease; параметры анимации картинки для различных браузеров
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}
/*-----------------------------------------*/
.header-menu a:hover {
background-image: url("http://pics.livejournal.com/tastytheme/pic/0000eb3s");
background-position: 50% 50%;
background-repeat: no-repeat;
color: #999;
-webkit-transition:all .5s ease;
-moz-transition:all .5s ease;
-o-transition:all .5s ease;
transition:all .5s ease;
}
/*-----------------------------------------*/
Есть множество вариантов реализации. Можно подставить иконки и т.д. Поэтому интересуемся индивидуально. В Веб примеров множество.

Далее рассмотрим макет основного фона, боковой панели и области поста.

UPD

Unordered list

.header-menu ul, #footer-menu ul {
margin: 0px;
padding: 0px;
}

Так же два немаловажных параметра для меню. В этом случае устанавливаем внешний и внутренний отступы от границы меню. Класс .header-menu ul, и идентификатор #footer-menu ul можно при необходимости разделить на две составляющие. В таком формате как сейчас пишутся одинаковые параметры для нескольких объектов. Например разделяем на две части. Возможно придется применять различные значения к каждому объекту.

.header-menu ul {
margin: 0px;
padding: 0px;
}

#footer-menu ul {
margin: 0px;
padding: 0px;
}

P.S. Чтобы особо не мучаться с инспектором объектов, можно оригинальный CSS код всей вашей темы скопировать посредством инспектора. Затем запомнить в формате .css в Notepad++ и далее только определять название класса или идентификатора объекта, изредка пользуясь инспектором и имея весь код у себя, переписывая его параметры. Для этого в Chrome или Opera, видимо Firefox аналогично (редко пользуюсь), в правом окне наступаем на ссылку stylesheet и открывается окно с оригинальным кодом. Копируем и имеем список всех объектов и их параметры, которые собираемся переписать.


Subscribe

Recent Posts from This Journal

  • Анатолий Ющенко

    Только что получил сообщение: умер Анатолий Ющенко, мой хороший питерский знакомый. Он же организовывал мои семинары, семинары мои и Хазина.…

  • Комендантский час

    Комендантский час, введенный в Хакасии с завтрашнего дня по 7 ноября, идеально демонстрирует тот факт, что все эти локдауны, нерабочие дни,…

  • Биоэкстремисты

    Четыре месяца назад я писал о том, что борьба с вирусом быстро трансформируется в борьбу с людьми. Для чего рано или поздно, но будет введен термин…

  • Post a new comment

    Error

    Comments allowed for friends only

    Anonymous comments are disabled in this journal

    default userpic

    Your IP address will be recorded 

  • 0 comments