<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="header_top"></div>
<div class="menu">
<header class="container">
<div class="navbar navbar-inner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-menu">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="closepage" menuid="0" class="brand" href="#" followlink="true">
LOGO</a>
</div>
<div class="collapse navbar-collapse pull-right" id="main-menu">
<ul class="nav">
<li class="fadeInDown animated d1 "><a href="#" class="active" id="home" menuid="0" followlink="true" >Home</a></li>
<li class="fadeInDown animated d2"><a href="#" menuid="1" followlink="true">About</a></li>
<li class="dropdown fadeInDown animated d3">
<a href="#" class="trigger right-caret">Service</a>
<ul class="firstlevel dropdown-menu sub-menu" style="display: none;">
<li class="twolevel">
<a class="trigger right-caret">Email Support</a>
<!-- <ul class="thirdlevel dropdown-menu sub-menu" style="margin-left: -563px; display: none;">
<li><a href="#" menuid="220" followlink="true">ŞİRKET BİRLEŞME & SATIN ALMA</a></li>
<li><a href="#" menuid="221" followlink="true">HALKA ARZ</a></li>
<li><a href="#" menuid="222" followlink="true">TAHVİL/BONO İHRACI</a></li>
<li><a href="#" menuid="223" followlink="true">DANIŞMANLIK</a></li>
</ul>-->
</li>
<li><a href="#" menuid="224" followlink="true">Router Support</a></li>
<li class="twolevel">
<a class="trigger right-caret">Antivirus Support</a>
<!-- <ul class="thirdlevel dropdown-menu sub-menu">
<li><a href="#Forex" menuid="311" followlink="true">FOREX</a></li>
<li><a href="#CFD" menuid="312" followlink="true">CFD</a></li>
<li><a href="#Hisse" menuid="3" followlink="true">HİSSE/VİOP</a></li>
<li><a href="#Turev" menuid="4" followlink="true">TÜREV</a></li>
<li><a href="#UluslararasiPiyasalar" menuid="5" followlink="true">ULUSLARARASI PİYASALAR</a></li>
</ul>-->
</li>
<li><a href="#Varlik-Yonetimi" menuid="10" followlink="true">Quickbook Support</a></li>
<li><a href="#Varlik-Yonetimi" menuid="10" followlink="true">Printer Support</a></li>
<li><a href="#Varlik-Yonetimi" menuid="10" followlink="true">Game Support</a></li>
</ul>
</li>
<li class="fadeInDown animated d3"><a href="#Iletisim" menuid="11" followlink="true">Dislaimer</a></li>
<li class="fadeInDown animated d2"><a href="#" menuid="1" followlink="true">Blog</a></li>
<li class="fadeInDown animated d2"><a href="#" menuid="1" followlink="true">Contact Us</a></li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</header>
</div><!--menu-->
.header_top{
width:100%;
height:10px;
background:#00e3ff;
}
.menu{
width:100%;
background:#fff;
box-shadow:0 3px 3px rgba(146,146,146,1.00);
}
.slider{
width:100%;
}
.navbar-inner {
margin-top: 0;
background: #fff;
box-shadow: none;
border: none;
height: 55px;
}
.navbar-inner .brand {
margin-top: 14px;
display: block;
}
.navbar .nav > li {
float: left;
height: 75px !important;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:active,
.navbar .nav > li > a:focus,
.navbar .nav > li > a.active,
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .active-menu {
background: #00e3ff !important;
color: #000 !important;
}
.navbar .nav > li > a {
color: #00e3ff !important;
float: none;
height: 100%;
font-family: 'Roboto', sans-serif;
line-height: 70px;
padding: 0 15px;
text-decoration: none;
text-shadow: none;
letter-spacing: 2.322px;
}
.dropdown-menu > li {
position: relative;
-webkit-user-select: none; /* Chrome/Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */
-o-user-select: none;
user-select: none;
cursor: pointer;
}
#main-menu {
font-family: 'Roboto', sans-serif !important;
font-size: 14px !important;
font-weight: 300 !important;
}
.dropdown-menu {
background-clip: padding-box;
background: #00e3ff;
border: none;
border-radius: 0;
box-shadow: none;
float: left;
left: 0;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
top: 100%;
z-index: 1000;
}
.dropdown .sub-menu li > a {
padding-top: 15px;
padding-bottom: 15px;
text-decoration: none;
text-shadow: none;
font-family: 'Roboto', sans-serif;
letter-spacing: 1.322px;
color: #000 !important;
border-right: 6px solid #000;
border-left: 1px solid #efefef;
}
.dropdown .sub-menu {
margin-top: -1px;
}
.dropdown .sub-menu li {
border-top: 1px solid #efefef;
}
.dropdown .sub-menu li:nth-child(1) {
border-top: 1px solid #efefef;
}
.dropdown .sub-menu li > a:hover {
border-right-color: #A1A1A1;
}
.secondlevel {
left: 100%;
}
.thirdlevel {
left: 100% !important;
top: 0px !important;
}
.forthlevel {
left: 100% !important;
top: 0px !important;
}
.navbar-toggle .icon-bar {
background-color: #888;
}
.navbar .nav > li > .dropdown-menu::before {
position: absolute;
top: -7px;
left: 43px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #CCC;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.navbar .nav > li > .dropdown-menu::after {
position: absolute;
top: -6px;
left: 43px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
border-left: 6px solid transparent;
content: '';
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
background-color: #00e3ff;
color: #262626;
text-decoration: none;
}
$(function () {
$("#main-menu").on("mouseenter", ".dropdown", function () {
$(this).find(".firstlevel").parent().addClass("active");
$(this).find(".firstlevel").show();
$(this).on("mouseleave", function () {
$(this).find(".firstlevel").hide();
$(this).find(".firstlevel").parent().removeClass("active");
});
});
$("#main-menu").on("mouseenter", ".twolevel", function () {
var ww = $(window).width();
var $menuItem = $(this).find(".thirdlevel");
var $firstLevel = $(".firstlevel");
var mw = $menuItem.width() + $firstLevel.offset().left + $firstLevel.width();
var marginLeft = 0 - ($menuItem.width() + $firstLevel.width());
if (ww < mw)
{
$menuItem.css("margin-left", marginLeft);
}
$menuItem.css("display", "block");
$(this).on("mouseleave", function () {
$(this).find(".thirdlevel").css("display", "none");
});
});
});
$(function () {
$(".dropdown-menu > li > a.trigger").on("click", function (e) {
var current = $(this).next();
var grandparent = $(this).parent().parent();
if ($(this).hasClass('left-caret') || $(this).hasClass('right-caret'))
$(this).toggleClass('right-caret left-caret');
grandparent.find('.left-caret').not(this).toggleClass('right-caret left-caret');
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".dropdown-menu > li > a:not(.trigger)").on("click", function () {
var root = $(this).closest('.dropdown');
root.find('.left-caret').toggleClass('right-caret left-caret');
root.find('.sub-menu:visible').hide();
});
});
