Dropdown menu + Slider
by Victor Tupolev
HTML
<script src="http://test.z261860.infobox.ru/test/var02/js/slider.js"></script>
<body>
<!-- Main Menu Inverted -->
<div class="ui vertical center aligned segment" id="mainmenu">
<div class="ui container">
<div class="ui large secondary menu">
<div class="ui inverted dropdown link item" id="DropMenu_01">
<span class="text">Dropdown Menu</span><i class="dropdown icon"></i>
<div class="menu">
<a class="item">1</a>
<a class="item">2</a>
<a class="item">3</a>
<a class="item">4</a>
</div>
</div>
<a class="active item">Simple Menu</a>
</div>
</div>
</div>
<div style="height: 100px; background-color: #f5efef; color: #aaaaaa;">Free space</div>
<div class="ui inverted vertical center aligned segment" id="slider">
<div class="ui container">
<!-- START REVOLUTION SLIDER 4.7 fullwidth mode -->
<div id="rev_slider_2_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin: 0px; padding: 0px; margin-top: 0px; margin-bottom: 0px; max-height: 300px; width:500px !important">
<div id="rev_slider_2_1" class="rev_slider fullwidthabanner" style="display: none; max-height: 300px; height: 300px;">
<ul>
<!-- SLIDE 1-->
<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-saveperformance="off">
<img src="assets/transparent.png" alt="" data-bgposition="center top" data-bgfit="cover" data-bgrepeat="no-repeat">
<div class="tp-caption sui_slide_txt_extrabold_90px sft fadeout tp-resizeme" data-x="286" data-y="179" data-speed="300" data-start="1000" data-easing="Power3.easeInOut" data-splitin="none" data-splitout="none" data-elementdelay="0.1" data-endelementdelay="0.1"
data-endspeed="300" style="z-index: 5; max-width: auto; max-height: auto; white-space: nowrap;">
<div class="tp-layer-inner-rotation...
JavaScript
// Инициализация выпадающих меню
$(document).ready(function() {
$('#DropMenu_01').dropdown({
on: 'hover',
transition: 'drop'
});
// Запуск слайдера
if ($('#rev_slider_2_1').revolution == undefined) {
revslider_showDoubleJqueryError('#rev_slider_2_1');
} else {
revapi2 = $('#rev_slider_2_1').show().revolution({});
}
});