- ЛентаПонедельник 29.04.2024 00:03
in.uCoz.org - создан в помощь uCмастеру и служит для решения проблем возникших у пользователей администрирующих сайты системы uCoz. Все вопросы пишите на форуме в соответствующий раздел
Вы находитесь: Главная » Меню сайта » Выезжающее горизонтальное меню на CSS3ПопулярноеНаш опросСлучайный анекдот7 Стали волки часто на стадо овец нападать. Пошёл мужик на базар покупать подходящую собаку. Все с овчарками стоят, а один мужичек мелкую шавку расхваливает. - Да ну, её ж любой волк пополам перекусит! - Ты что, мужик, это ж собака-Боробака! Гроза всех волков, бери, не пожалеешь. Купил её мужик, поставил стадо охранять. И вот ночью бежит стая волков. Все большие серьезные такие волки. Смотрят, на лугу стадо коров пасется. Обрадовались волки, со всех ног бросились они к коровам. - Вон та моя!!! - кричит один волк. - А вон та моя!!! И тут смотрят большие серьезные такие волки маленькая собачонка стадо охраняет: - Тяф, тяф! Испугались волки и бросились наутёк. Подбегает самый молодой и горячий волк к вожаку и говорит: - Да ты что, вождь?? Что мы такой маленькой собачонки испугались?? Да максимум на что она способна так это поцеловать меня в задницу!!! - Оо-о-о-о... А ты знаешь, какие у нее холодные губы?СтатистикаОнлайн всего: 1Гостей: 1Пользователей: 0
» Сегодня нас посетили:» Зарег. на сайте
Всего: 3473
Новых за месяц: 0
Новых за неделю: 0
Новых вчера: 0
Новых сегодня: 0
» Из них
Администраторов: 1
Модераторов: 3
С активностью: 176
Авторизованных: 3293Выезжающее горизонтальное меню на CSS3
Горизонтальное, выезжающее, темное меню выполненное на CSS3 и никаких скриптов. После установки вверху сайта появится черная полоска, шириной 5px, при наведении на которую будет выезжать ваше меню.
Установка:
В верхнюю часть сайта в панели управления, в самый верх сохраняем код:
Код<ul class="wmtop">
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
<li><a href="#">Главная</a></li>
</ul>
В CSS сохраняем:
Код.wmtop {position:fixed;top:0;box-sizing:border-box;-moz-box-sizing:border-box;width:100%;padding:0 20px;background:rgba(0,0,0,.7);background:#333\0/;list-style:none;margin-top:-5px;-webkit-transform:translateY(-40px);-moz-transform:translateY(-40px);-ms-transform:translateY(-40px);transform:translateY(-40px);-webkit-transition:-webkit-transform .5s cubic-bezier(.7,-0.2,.3,1.5);-moz-transition:-webkit-transform .3s ease;-ms-transition:-webkit-transform .3s ease;transition:transform .5s cubic-bezier(.7,-0.2,.3,1.5);}
.wmtop:hover {-webkit-transform:translateY(0);-moz-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);}
.wmtop li {display:table-cell;width:1%;-webkit-transform:skewX(160deg);-moz-transform:skewX(160deg);-ms-transform:skewX(160deg);transform:skewX(160deg);}
.wmtop a {color:#fff;text-decoration:none;display:block;text-align:center;-webkit-transform:skewX(-160deg);-moz-transform:skewX(-160deg);-ms-transform:skewX(-160deg);transform:skewX(-160deg);padding:18px;}
.wmtop li:hover {background:rgba(0,0,0,.3);background:#222\0/;}
Html редактор
Вставте код в поле и нажмите проверить.
Не забывайте указывать путь к файлам и картинкам в скриптах!!!Просмотров: 1140113.12.2013
Другие статьи почитайка;)
Поделись ссылкой на форумах
Ссылка: BB-code: HTML:
« Пред. Выезжающее горизонтальное меню на CSS3 След. »
Форма входаМини-чатТоп пользователейProsvetekvator 190 startsmart 72 DoG 24 vasilievaleksei 12 Reactor 10 HACKER 6 sarstar 3 Алена 2 Diz24 2 na3uTuB4uk 1 Новое на форуме
Комментарии11.06.2022
02.04.2020
Может это по тому, что редактировали скрипт? 