Меню в виде дисплея | Скрипт для сайта - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Скрипты для uCoz » Меню для сайта uCoz » Меню в виде дисплея | Скрипт для сайта

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Меню в виде дисплея | Скрипт для сайта


Меню дисплей работающее без скриптов




Меню в виде дисплея,используются только свойства CSS3.Основные регулировки настроены для работы,для изменения цвета фона измените значения для свойства background.Для изменения линейного градиента измените значение свойства background-image.Для изменения скорости перехода измените значение свойства transition.Префиксы -webkit-,-moz-,-ms-,-o- предназначены для индивидуальных браузеров и заменяют основное свойство.Для изменения цвета текста в секциях измените значения свойства color.Для изменения размера текста измените значение свойства font.На сайте есть статьи по всем свойствам и тегам,воспользуйтесь поиском введя в него название интересующего элемента.Можно установить весь код со стилями,можно стили перенести в файл основных стилей ( не рекомендуется ).




Код меню для установки


<style>
.holder {width:250px; height:250px; background:#069; position:relative; margin:0; border-radius:5px; box-shadow:0 10px 8px -10px rgba(0,0,0,0.8);
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
background-image: -ms-linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
}
.holder input {position:absolute; left:-9999px;;}
#driller {width:250px; height:250px; position:relative;}
#driller dl {width:250px; height:250px; position:absolute; padding:0; margin:0; top:0; left:0; opacity:0; z-index:-1;
-webkit-transition: 1s;
-moz-transition: 1s;
-ms-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
#driller dl dt {color:#fff; padding:5px 10px; height:40px; font:normal 11px/20px verdana, arial, sans-serif;}
#driller dl dt label {color:#ff0; cursor:pointer; position:relative;}
#driller dl dd {padding:0; margin:0; padding:5px 10px; font:normal 12px/25px verdana, arial, sans-serif;}
#driller dl dd a {display:block; text-decoration:none; color:#666; border-bottom:1px solid #eee; background:#fff; text-indent:14px;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#driller dl dd label.sub {display:block; border-bottom:1px solid #eee; text-indent:5px; color:#000; background:#fff; cursor:pointer; position:relative;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
#driller dl dd a:last-child,#driller dl dd label.sub:last-child {border-bottom:0;}
#driller dl dd a:first-child,
#driller dl dd label.sub:first-child {box-shadow: inset 0 7px 4px -5px rgba(0,0,0,0.7);}
#driller dl dd label.sub:hover,
#driller dl a:hover {background:#069; color:#fff;
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
background-image: linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
#driller dl dd.links {max-height:200px; overflow:auto;}
#driller dl dd.back {position:absolute; left:0; bottom:0; width:230px; text-align:right;}
#driller dl dd.back label {color:#ff0; border:0; background:transparent; font:normal 11px/25px verdana, arial, sans-serif; box-shadow:none;}
#driller label img {display:block; width:100%; height:100%; position:absolute; left:0; top:0;}
#home:checked ~ #driller .dl1,
#contacts:checked ~ #driller .dl2,
#resort:checked ~ #driller .dl3,
#area:checked ~ #driller .dl4,
#inform:checked ~ #driller .dl5,
#slopes:checked ~ #driller .dl6,
#restaurants:checked ~ #driller .dl7,
#hire:checked ~ #driller .dl8,
#skill:checked ~ #driller .dl9,
#essential:checked ~ #driller .dl10,
#language:checked ~ #driller .dl11,
#rental:checked ~ #driller .dl12 {opacity:1; z-index:100;}
</style>
<div class="holder">
<input type="radio" name="pop" id="home" class="pop" checked="checked" />
<input type="radio" name="pop" id="contacts" class="pop" />
<input type="radio" name="pop" id="resort" class="pop" />
<input type="radio" name="pop" id="area" class="pop" />
<input type="radio" name="pop" id="inform" class="pop" />
<input type="radio" name="pop" id="slopes" class="pop" />
<input type="radio" name="pop" id="restaurants" class="pop" />
<input type="radio" name="pop" id="hire" class="pop" />
<input type="radio" name="pop" id="skill" class="pop" />
<input type="radio" name="pop" id="essential" class="pop" />
<input type="radio" name="pop" id="language" class="pop" />
<input type="radio" name="pop" id="rental" class="pop" />
<div id="driller">
<dl class="dl1">
<dt>Home</dt>
<dd class="links">
<label class="sub" for="contacts">&#9658; Contact Us<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<label class="sub" for="resort">&#9658; Resort<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<label class="sub" for="area">&#9658; Surrounding Area<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<label class="sub" for="inform">&#9658; Information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="index.html">Privacy</a>
</dd>
</dl>
<dl class="dl2">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; Contact Us</dt>
<dd class="links">
<a href="#url">Email</a>
<a href="#url">Telephone</a>
<a href="#url">Online Form</a>
<a href="#url">Snail Mail Address</a>
</dd>
<dd class="back"><label for="home">&#9668; Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl3">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; Resort</dt>
<dd class="links">
<a href="#url">Ski Hire Facilities</a>
<label class="sub" for="slopes">&#9658; Main Ski Slopes<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="#url">Night Life</a>
<label class="sub" for="restaurants">&#9658; Restaurants<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<label class="sub" for="hire">&#9658; Car Hire<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="#url">Shopping</a>
</dd>
<dd class="back"><label for="home">&#9668; Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl4">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; Surrounding Area</dt>
<dd class="links">
<a href="#url">Where to go</a>
<a href="#url">What to do</a>
<a href="#url">Places of interest</a>
<a href="#url">National parks & Museums</a>
</dd>
<dd class="back"><label for="home">&#9668; Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl5">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; Information</dt>
<dd class="links">
<a href="#url">Money Exchange</a>
<label class="sub" for="essential">&#9658; Resort Essential Information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<label class="sub" for="language">&#9658; Language<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="#url">Short Breaks</a>
</dd>
<dd class="back"><label for="home">&#9668; Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl6">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; <label for="resort">Resort<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; Main Ski Slopes</dt>
<dd class="links">
<a href="#url">Beginners Slopes</a>
<a href="#url">Intermediate Slopes</a>
<label class="sub" for="skill">&#9658; Advanced Skill Levels<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="#url">Expert</a>
</dd>
<dd class="back"><label for="resort">&#9668; Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl7">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; <label for="resort">Resort<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; Restaurants</dt>
<dd class="links">
<a href="#url">Snow Hotel</a>
<a href="#url">The Snowman</a>
<a href="#url">Ice Cavern</a>
<a href="#url">Ski Inn</a>
</dd>
<dd class="back"><label for="resort">&#9668; Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl8">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; <label for="resort">Resort<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; Car Hire</dt>
<dd class="links">
<a href="#url">From Airport</a>
<a href="#url">In Resort</a>
<a href="#url">Multiple Resorts</a>
</dd>
<dd class="back"><label for="resort">&#9668; Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl9">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; <label for="resort">Resort<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; <label for="slopes">Main Ski Slopes<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; Advanced Skill Levels</dt>
<dd class="links">
<a href="#url">Local</a>
<a href="#url">Nearby</a>
<a href="#url">With instructor</a>
<a href="#url">Snow boarding</a>
</dd>
<dd class="back"><label for="slopes">&#9668; Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl10">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; <label for="inform">information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; Resort Essential Information</dt>
<dd class="links">
<a href="#url">Lift Passes</a>
<a href="#url">Insurance</a>
<label class="sub" for="rental">&#9658; Gear Rental<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label>
<a href="#url">Ski Schools</a>
<a href="#url">Snow Report</a>
</dd>
<dd class="back"><label for="inform">&#9668; Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl11">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; <label for="inform">Information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; Language</dt>
<dd class="links">
<a href="#url">Austrian</a>
<a href="#url">German</a>
<a href="#url">French</a>
<a href="#url">English</a>
</dd>
<dd class="back"><label for="inform">&#9668; Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
<dl class="dl12">
<dt><label for="home">Home<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; <label for="inform">information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; <label for="essential">Resort Essential Information<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label> &#9658; Gear Rental</dt>
<dd class="links">
<a href="#url">Boots</a>
<a href="#url">Skis</a>
<a href="#url">Ski Wear</a>
<a href="#url">Goggles</a>
</dd>
<dd class="back"><label for="essential">&#9668; Back<img src="http://delaisait.ucoz.ru/script/menu/img/1/trans.gif" alt="" /></label></dd>
</dl>
</div>
</div>

Проверить код меню в работе

Вставьте код меню в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 2136 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: дисплей меню

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]