Уважаемые, форумчане. Подскажите, пожалуйста. Я бы хотела установить себе такое меню под шапкой форума. Попробовала внести изменения, НО весь стиль форума перекосился. Я так понимаю, что из первой группы кодов (в стиле) вот этой "CSS. Стили которые используются во всех примерах:" мне нужно не всё тупо копировать. Видимо, там уже определены .nav и т.п. для МОЕГО форума, а я сейчас их переписываю (стиль). Подскажите, пожалуйста, что делать? КАк внести такое меню, не портя свой основной стиль форума? К сожалению, я в CSS не очень разбираюсь.
наш форум здесь http://www.scienceclub.listbb.ru/index.php
Меню с необычным скользящим эффектом, также известным как эффект Lavalamp. Только на сей раз мы создадим его на чистом CSS.
В нашем меню мы использовали нестандартные шрифты из Google Web Fonts, поэтому первым делом нам нужно добавить необходимый код в заголовок html страницы, перед закрывающим тегом
Либо добавляем в тему стиля:
В нашем примере три меню, у всех одинаковая html структура, разница заключается лишь во втором классе элемента
Html структура из первого примера:
В каждом следующим примере мы заменяем класс:
CSS. Стили которые используются во всех примерах:
Основная магия, если это можно так назвать, начинается здесь:
При наведении мыши на один из элементов
Теперь остальной CSS для каждого из примеров.
Пример 1.
Пример 2.
Пример 3.
В последнем примере мы используем небольшое изображение в виде сердца со стрелой: . Сердце состоит из двух псевдо-элементов
В нашем меню мы использовали нестандартные шрифты из Google Web Fonts, поэтому первым делом нам нужно добавить необходимый код в заголовок html страницы, перед закрывающим тегом
</head>
ставим:
Код: Выделить всё
<link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" />
Код: Выделить всё
@import url(http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic);
<div>
. Html структура из первого примера:
Код: Выделить всё
<div class="ph-line-nav nav">
<a href="http://cabinetadmina.ru#">Главная</a>
<a href="http://cabinetadmina.ru#">О нас</a>
<a href="http://cabinetadmina.ru#">Галерея</a>
<a href="http://cabinetadmina.ru#">Контакты</a>
<div class="effect"></div>
</div>
ph-line-nav
, на ph-dot-nav
и ph-heart-nav
.CSS. Стили которые используются во всех примерах:
Код: Выделить всё
html, body, div, a {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative;
font-family: 'Kelly Slab', cursive;
font-size: 1.5em;
text-shadow: 0 1px 0 white;
}
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
}
.nav a:hover {
color: #c6342e;
}
Код: Выделить всё
.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out;
}
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%;
}
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%;
}
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%;
}
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%;
}
<a>
, мы плавно перемещаем div.effect
к его середине.Теперь остальной CSS для каждого из примеров.
Пример 1.
Код: Выделить всё
.ph-line-nav .effect {
width: 90px;
height: 2px;
bottom: 36px;
background: #c6342e;
box-shadow: 0 1px 0 white;
margin-left: -45px;
}
Код: Выделить всё
.ph-dot-nav:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 1px;
background: #c6342e;
bottom: 40px;
}
.ph-dot-nav a:after {
content: "";
position: absolute;
width: 4px;
height: 4px;
bottom: 38px;
left: 50%;
margin-left: -2px;
background: #c6342e;
border-radius: 100%;
}
.ph-dot-nav .effect {
width: 10px;
height: 10px;
bottom: 36px;
margin-left: -5px;
background: #c6342e;
border-radius: 100%;
}
Код: Выделить всё
.ph-heart-nav .effect, .ph-heart-nav a:after, .ph-heart-nav a:before {
background: url('/images/heart.png') no-repeat;
}
.ph-heart-nav .effect {
position: absolute;
bottom: 26px;
background-position: 0 0;
height: 8px;
width: 62px;
margin-left: -31px;
}
.ph-heart-nav a:before {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 20px;
background-position: -62px 0;
height: 20px;
width: 11px;
margin-left: -11px;
}
.ph-heart-nav a:after {
content: "";
display: block;
position: absolute;
left: 50%;
bottom: 20px;
z-index: 1;
background-position: -73px 0;
height: 20px;
width: 11px;
}
:before
(левая половина сердца) и :after
(правая половина). Для :after
установлен z-index: 1;
так, чтобы при наведении мыши он находился перед стрелкой.Комментарии: 2
Форум Science-Леди www.scienceclub.listbb.ru
Тут получается что для каждого варианта коды css не полностью разные.
Ставите сначала первую часть кода:
Затем один из трёх примеров.
Небольшие настройки.
Чтобы уменьшить вертикальные отступы, найдите в:
Также есть отступы у самого текста:
Ставите сначала первую часть кода:
Код: Выделить всё
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative;
font-family: 'Kelly Slab', cursive;
font-size: 1.5em;
text-shadow: 0 1px 0 white;
}
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
}
.nav a:hover {
color: #c6342e;
}
.effect {
position: absolute;
left: -12.5%;
-webkit-transition: 0.7s ease-in-out;
-moz-transition: 0.7s ease-in-out;
-o-transition: 0.7s ease-in-out;
-ms-transition: 0.7s ease-in-out;
transition: 0.7s ease-in-out;
}
.nav a:nth-child(1):hover ~ .effect {
left: 12.5%;
}
.nav a:nth-child(2):hover ~ .effect {
left: 37.5%;
}
.nav a:nth-child(3):hover ~ .effect {
left: 62.5%;
}
.nav a:nth-child(4):hover ~ .effect {
left: 87.5%;
}
Небольшие настройки.
Чтобы уменьшить вертикальные отступы, найдите в:
Код: Выделить всё
.nav {
text-align: center;
overflow: hidden;
margin: 2em auto;
width: 480px;
position: relative;
font-family: 'Kelly Slab', cursive;
font-size: 1.5em;
text-shadow: 0 1px 0 white;
}
margin: 2em auto;
- 2em меняете на 0.Также есть отступы у самого текста:
Код: Выделить всё
.nav a {
display: block;
position: relative;
float: left;
padding: 1em 0 2em;
width: 25%;
text-decoration: none;
color: #393939;
-webkit-transition: .7s;
-moz-transition: .7s;
-o-transition: .7s;
-ms-transition: .7s;
transition: .7s;
}
padding: 1em 0 2em;
- 1em - отступ от верхнего края, 2em - отступ от нижнего края. Меняя их нужно будет немного поправлять отступы в коде одного из выбранных примеров.Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!
Похожие темы
-
Расширение позволяющее добавить на форум свой стиль, скрипт или блок с произвольным содержимым. В расширении можно задать шапку форума, ico иконку...