$(document).ready(function(){
$(".dropdown").click(
function() {
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).slideToggle("600");
$(this).toggleClass('open');
}
);
});
header .navbar-header{
position: relative;
z-index: 10;
left: 0;
right: 0;
}
header .nav-bottom{
box-shadow: inherit;
}
header .navbar-default{
color: #272727;
background-color: #000;
background-image: inherit;
box-shadow: inherit;
position: fixed;
padding: 11px 0;
height: 81px;
border-radius: inherit;
}
header .navbar-default .navbar-nav > li > a{
font-family: 'Open Sans', sans-serif;
text-transform: uppercase;
font-weight: 600;
}
header .nav > li > a{
padding: 6px 7px;
}
header .navbar-default .navbar-nav > .dropdown > a span{
color: #808080;
margin-left: 10px;
font-size: 28px;
}
header > nav > div > div > div > div.menu-derecho.hidden-xs > div > ul > li > a > span:hover{
color: #00ab84!important
}
header .navbar-default .navbar-brand{
color:#fff;
}
header .menu-large {
position: static !important;
}
header .megamenu{
width:100%;
}
header .megamenu> li > ul {
padding: 0;
margin: 0;
}
header .megamenu> li > ul > li {
list-style: none;
}
header .megamenu> li > ul > li > a {
display: block;
padding: 3px 0px 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
margin: auto;
}
header .megamenu> li ul > li > a:hover,
header .megamenu> li ul > li > a:focus {
text-decoration: none;
color: #238491;
background-color: transparent;
}
header .megamenu > .caja-programa-redes ul > .logos-social > a:hover,
header .megamenu > .caja-programa-redes ul > .logos-social > a:focus {
text-decoration: none;
color: #238491;
background-color: #00a780;
}
header .megamenu.disabled > a,
header .megamenu.disabled > a:hover,
header .megamenu.disabled > a:focus {
color: #999999;
}
header .megamenu.disabled > a:hover,
header .megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
header .megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}
header .nav-bottom .radio-online .navbar-collapse .play-stop{
float: left;
height: 50px;
width: 45px;
margin-right: 15px;
}
header .nav-bottom .radio-online .navbar-collapse .onda-desplegable{
float: left;
}
header .nav-bottom .radio-online .navbar-collapse {
cursor: pointer;
width: 409px;
}
.nav-bottom .menu-derecho .fa-search{
color: #5bb2c9;
font-size: 18px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-titulo{
padding: 55px 0;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-de-que-va, .caja-programa-redes{
padding: 40px 20px 25px 20px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa{
padding: 40px 50px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul > .titulo-del-programa {
color: #00ab84;
font-family: 'Titillium Web', sans-serif;
font-weight: 700;
font-size: 25px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul > .conductor-del-programa {
color: #fff;
font-family: 'Titillium Web', sans-serif;
font-weight: 500;
font-size:19px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul > .hora-del-programa {
color: #9a9a9a;
font-family: 'Titillium Web', sans-serif;
font-weight: 500;
font-size:14px;
margin-top: 10px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa > ul >.hora-del-programa > .fa-clock-o{
font-size: 15px!important;
color: #9a9a9a!important;
margin-top: 3px!important;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-de-que-va > ul > .titulo-descripcion-del-programa{
color: #fff;
font-size: 18px;
font-family: 'Titillium Web', sans-serif;
font-weight: 600;
margin-bottom: 15px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-de-que-va > ul > .descripcion-del-programa{
color: #fff;
font-family: 'Titillium Web', sans-serif;
font-weight: 500;
font-size: 14px;
}
header .megamenu> li > ul > li > .btn-mas-info-programa{
background-color: #00a780;
padding: 8px 20px;
color: #fff;
text-align: center;
margin-top: 20px;
font-family: 'Titillium Web', sans-serif;
font-weight: 600;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
header .megamenu> li > ul > li > .btn-mas-info-programa:hover{
background-color: #2d2d2d;
color: #fff;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .titulo-redes{
color: #fff;
font-size: 18px;
font-family: 'Titillium Web', sans-serif;
font-weight: 600;
margin-bottom: 15px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .titulo-redes-whatsapp{
color: #fff;
font-size: 15px;
font-family: 'Titillium Web', sans-serif;
font-weight: 600;
margin-bottom: 15px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logos-social {
display: inline-block;
padding: 5px 2px;
margin-bottom: 25px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logos-social a {
width: 39px;
height: 39px;
padding: 0;
background-image: url("http://qkstudiodemo.com/radiocantilo/html/images/cd-socials.svg");
background-repeat: no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
border-radius: 50px;
border:1px solid #fff;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logos-social a:hover {
background-color: #30ab83;
border:1px solid #30ab83;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logo-facebook a {
background-position: -4px -3px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logo-twitter a {
background-position: -46px -3px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logo-instragram a {
background-position: -91px -4px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .logo-vimeo a {
background-position: -136px -3px;
}
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-programa-redes > ul > .numero-whatsapp a > .fa-whatsapp{
margin-top: 10px!important;
font-size: 20px!important;
margin-right: 8px!important;
}
header .megamenu> li > ul > li > .numero-whatsapp {
padding: 0;
color: #fff;
font-size: 18px;
margin: 0;
}
/*--------------------------------------------------*/
/*DESPLEGABLE MENU PRINCIPAL*/
.menu-large .dropdown-menu{
background-color: #1b1b1b;
border-radius: inherit;
}
.menu-large .megamenu .titulo-slogan{
font-family: 'Titillium Web', sans-serif;
font-weight: 500;
font-size: 19px;
color: #fff;
text-align: center;
}
.menu-large .megamenu .titulo-slogan span{
text-decoration: line-through;
font-weight: 500;
}
/*-----------------logos de sybila-------------------------- */
.menu-large .megamenu .logo-deplegable-innocenza a {
width: 124px;
height: 30px;
padding: 0;
background-image: url("http://qkstudiodemo.com/radiocantilo/html/images/logos/logo-inocenza.svg");
background-repeat: no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.menu-large .megamenu .logo-deplegable-sybyla a {
width: 125px;
height: 44px;
padding: 0;
background-image: url("../images/logos/logo-sybila.svg");
background-repeat: no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.menu-large .megamenu .logo-deplegable-sybpro a {
width: 124px;
height: 35px;
padding: 0;
background-image: url("../images/logos/logo-sybtv.svg");
background-repeat: no-repeat;
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
/*---------HOVER----*/
.menu-large .megamenu .logo-innocenza a:hover {
background-position: 0px 0px;
background-image: url("../images/logos/logo-inocenza-hover.svg");
background-repeat: no-repeat;
}
.menu-large .megamenu .logo-sybyla a:hover {
background-position: 0px 0px;
background-image: url("../images/logos/logo-sybila-hover.svg");
background-repeat: no-repeat;
}
.menu-large .megamenu .logo-sybpro a:hover {
background-position: 0px 0px;
background-image: url("../images/logos/logo-sybtv-hover.svg");
background-repeat: no-repeat;
}
/*-------------------------------------------------------*/
.navbar-default .navbar-nav > .dropdown > .dropdown-menu > .caja-titulo ul li{
list-style: none;
}
.navbar-default .navbar-nav > li > a {
display: inline-block;
vertical-align: middle;
-webkit-transform: translateZ(0);
transform: translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-osx-font-smoothing: grayscale;
position: relative;
overflow: hidden;
}
.navbar-default .navbar-nav > li > a:before {
content: "";
position: absolute;
z-index: -1;
left: 0;
right: 0;
bottom: 0;
height: 4px;
-webkit-transform: translateY(4px);
transform: translateY(4px);
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.navbar-default .navbar-nav > li > a:hover:before, .navbar-default .navbar-nav > li > a:focus:before, .navbar-default .navbar-nav > li > a:active:before {
-webkit-transform: translateY(0);
transform: translateY(0);
color: red;
background-color: #00ab84;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .active > a{
background-image:inherit;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus{
box-shadow:inherit;
background-color: transparent;
}
.menu-color{
background-color: #f2f9fb;
}
.menu-color-historia{
background-color: #e5e4e9;
}
.navbar-default{
border-color: transparent;
margin-bottom: 0;
}
/*MENU RADIO ONLINE*/
#play, #pause {
background: transparent;
position: relative;
display: block;
margin-top: 5px
}
#play {
width: 0;
height: 0;
position: relative;
content: "";
}
#pause:before {
content: "";
top: 10px;
left: 25px;
}
#pause:after {
content: "";
top: 10px;
right: 33px;
}
header .nav-bottom .menu-principal .logo-cantilo .logo-principal{
float: left;
margin-left: 10px;
margin-right: 15px;
}
header .nav-bottom .menu-principal .play-stop-mobile{
float: left;
width: 49px;
}
header .nav-bottom .menu-principal .onda-mobile{
float: left;
}
header .nav-bottom .menu-principal{
padding: 0 33px;
margin-top: 6px;
}
header .nav-bottom .menu-principal .logo-cantilo{
float: left;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large i{
color: #fff;
font-size: 17px;
float: left;
margin-right: 5px;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large a:hover{
color: red
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large .fa-angle-down{
float: right;
font-size: 22px;
margin-left: 8px;
position: relative;
bottom: 4px;
}
header .nav-bottom .menu-derecho{
float: left;
width: 387px;
}
header .nav-bottom .menu-derecho .navbar-collapse{
float: right;
}
header .nav-bottom .radio-online{
float: right;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large h5{
color: #fff;
margin: 0;
margin-top: 1px;
font-family: 'Titillium Web', sans-serif;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large h3{
color: #00ab84;
font-family: 'Titillium Web', sans-serif;
font-weight: 700;
margin: 0;
float: left;
font-size: 20px;
clear: both;
}
header > nav > div > div > div > div.radio-online > div > ul > li.dropdown.menu-large > a > h3:hover{
color: #fff!important;
}
header > nav > div > div > div > div.radio-online > div > ul > li.dropdown.menu-large > a > i:hover{
color: green!important;
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .menu-large h6{
color: #fff;
text-align: right;
clear: both;
}
header > nav > div > div > div > div.radio-online > div > ul > li.dropdown.menu-large > a > h6:hover{
color: #e2b739!important
}
header .nav-bottom .radio-online .navbar-collapse .navbar-nav .onda-de-radio{
margin-left: 15px;
}
.cd-header {
position: relative;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.95);
height: 65px;
z-index: 3;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cd-primary-nav-trigger{
float: left;
margin-top: 10px;
}
@media only screen and (min-width: 768px) {
.cd-header {
height: 80px;
background: transparent;
box-shadow: none;
margin: auto;
}
}
@media only screen and (min-width: 1170px) {
.cd-header {
-webkit-transition: background-color 0.3s;
-moz-transition: background-color 0.3s;
transition: background-color 0.3s;
/* Force Hardware Acceleration in WebKit */
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.cd-header.is-fixed {
position: fixed;
top: -80px;
background-color: rgba(0, 0, 0, 0.96);
-webkit-transition: -webkit-transform 0.3s;
-moz-transition: -moz-transform 0.3s;
transition: transform 0.3s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
<header>
<nav class="navbar navbar-default navbar-header cd-header" role="navigation">
<div class="nav-bottom">
<div class="container">
<div class="row">
<div class="menu-logo">
<div class="navbar-header">
<div class="menu-principal">
<div class="logo-cantilo" style="float: left;">
<a class="cd-primary-nav-trigger" href="#0">
<span class="cd-menu-text"></span>
<span class="cd-menu-icon"></span>
</a>
<a href="index.html">
<img class="img-responsive logo-principal" src="http://qkstudiodemo.com/radiocantilo/html/images/logo-cantilo.svg" alt="radio cantilo">
</a>
</div>
<div class="play-stop-mobile hidden-sm hidden-md hidden-lg">
<a href="#" id="play">
<img src="http://qkstudiodemo.com/radiocantilo/html/images/play.svg" alt="icono play">
</a>
<a href="#" id="pause" style="display: none;">
<img src="http://qkstudiodemo.com/radiocantilo/html/images/pause.svg" alt="icono pause">
</a>
</div>
<div class="onda-mobile hidden-sm hidden-md hidden-lg">
<img class="img-responsive onda-de-radio" src="http://qkstudiodemo.com/radiocantilo/html/images/onda-radial-mobile.png">
</div>
</div>
</div>
</div>
<div class="menu-derecho hidden-xs">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown menu-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<img src="http://qkstudiodemo.com/radiocantilo/html/images/logo-sybila.png">
<span class="fa fa-angle-down"></span>
</a>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-4 col-md-4 col-lg-3 col-lg-offset-1 caja-titulo">
<ul>
<li class="titulo-slogan">NUESTRAS <span>EMPRESAS</span> CREACIONES</li>
</ul>
</li>
<li class="col-sm-3 col-md-2 col-md-offset-1 col-lg-2 caja-titulo">
<ul>
<li class="logo-deplegable-innocenza logo-innocenza">
<a href="#0"></a>
</li>
</ul>
</li>
<li class="col-sm-2 col-md-2 col-lg-2 caja-titulo">
<ul>
<li class="logo-deplegable-sybyla logo-sybyla">
<a href="#0"></a>
</li>
</ul>
</li>
<li class="col-sm-3 col-md-2 col-lg-2 caja-titulo">
<ul>
<li class="logo-deplegable-sybpro logo-sybpro">
<a href="#0"></a>
</li>
</ul>
</li>
<li class="hidden-xs hidden-sm col-md-1 col-lg-3">
</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="radio-online">
<div class="navbar-collapse collapse">
<div class="play-stop">
<a href="#" id="play">
<img src="http://qkstudiodemo.com/radiocantilo/html/images/play.svg" alt="icono play">
</a>
<a href="#" id="pause" style="display: none;">
<img src="http://qkstudiodemo.com/radiocantilo/html/images/pause.svg" alt="icono pause">
</a>
</div>
<ul class="nav navbar-nav onda-desplegable">
<li class="dropdown menu-large">
<a href="#" style=" padding: 0">
<span style="float: right;clear: both; width: 150px;">
<i class="fa fa-headphones" aria-hidden="true"></i>
<h5>Estás escuchando</h5>
</span>
<h3>Almacén de discos</h3>
<h6>15 a 18hs.<i class="fa fa-angle-down"></i></h6></a>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-4 col-md-2 col-lg-3 caja-programa">
<ul>
<li class="titulo-del-programa">Almacén de discos</li>
<li class="conductor-del-programa">Claudio “BB” Sanzo</li>
<li class="hora-del-programa"><i class="fa fa-clock-o" aria-hidden="true"></i>Lunes a Viernes de 15 a 18hs.</li>
</ul>
</li>
<li class="col-sm-4 col-md-3 col-lg-2 caja-de-que-va">
<ul>
<li class="titulo-descripcion-del-programa">DE QUÉ VA?</li>
<li class="descripcion-del-programa">Phasellus at mi finibus, tempor odio at, facilisis nibh. Vivamus eget diam sollicitudin, commodo orci porta, congue ante. In eget lacus nisl. Nunc placerat finibus elementum. </li>
<li><a href="" class="btn-mas-info-programa">MÁS INFO</a></li>
</ul>
</li>
<li class="col-sm-4 col-md-3 col-lg-2 caja-programa-redes">
<ul>
<li class="titulo-redes">ENCONTRALO EN</li>
<li class="logos-social logo-facebook"><a href="#0">Facebook</a></li>
<li class="logos-social logo-twitter"><a href="#0">Twitter</a></li>
<li class="logos-social logo-instragram"><a href="#0">Instagram</a></li>
<li class="logos-social logo-vimeo"><a href="#0">vimeo</a></li>
<li class="titulo-redes-whatsapp">WHATSAPEALO AHORA AL</li>
<li><a href="" class="numero-whatsapp"><i class="fa fa-whatsapp" aria-hidden="true"></i>(221) 4722065</a></li>
</ul>
</li>
<li class="hidden-sm col-md-4 col-lg-5">
<ul>
<li class="logo-deplegable-sybpro logo-sybpro">
<img class="img-responsive" src="http://qkstudiodemo.com/radiocantilo/html/images/claudio-b-sanzo.jpg" alt="claudio-b-sanzo">
</li>
</ul>
</li>
</ul>
</li>
<li class="hidden-sm">
<img class="img-responsive onda-de-radio" src="http://qkstudiodemo.com/radiocantilo/html/images/onda-radial.png">
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<div>
</div>
</header>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
Hola un compañero me paso un trabajo que esta hecho en bootstrap y resulta que tiene un menú principal donde me pide que muestre como activo un boton que despliega un contenido. Este dicho botón es el que esta del lado derecho donde tiene un play y dice estas escuchando almacén de disco. El problema por el que escriboes que cuando esta activo el href y despliega el contenido debería quedarse por debajo una linea verde y al salir del estado activo debería irse. Lo que me esta haciendo ahora es que cuando clickeo la linea aparece, despliega se queda pero cuando salgo del desplegable que vuelvo a hacer click se queda la linea verde. no se si se comprende. adjunto el código para que miren dicho ejemplo. Dejo el ejemplo del código ejemplo andando acá adjunto ya que stack no permite mas de 30000 caracteres