I'm trying to get the dropdown to appear automatically when we mouse over it. I have seen an example in the community with jQuery but I can't adapt it to my example. Another problem is that I have styles in a file ("css/bootstrap.min.css"), Bootstrap version v3.3.5 and I see that the navigation bar where the dropdown is: (ABOUT ME) is not shown.
In my project the dropdown works by clicking on it, not here, but I don't know how to link the bootstrap files so you can see what I've achieved so far, and help me with the automatic dropdown. Thanks.
// Offset for Site Navigation
$('#siteNav').affix({
offset: {
top: 100
}
})
/*script para despliegue automatico*/
$( ".dropdown-toggle" ).hover(
function() {
// hover in
$( this ).next('.dropdown-menu').show("slow");
}, function() {
// hover out
var menuHover = !$(this).next(".dropdown-menu").is(":hover");
if (menuHover) {
$( this ).next('.dropdown-menu').hide("slow");
}
}
);
$(".dropdown-menu").mouseleave(function () {
if (!$(this).prev().is(":hover")) {
$(this).hide("slow");
}
});
html,
body {
width: 100%;
height: 100%;
font-family: 'Open Sans','Helvetica Neue',Arial,sans-serif;
}
a {
color: yellowgreen;
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}
a:hover,
a:focus {
color: forestgreen;
}
p {
font-size: 16px;
line-height: 1.5;
}
header {
position: relative;
width: 100%;
min-height: auto;
text-align: center;
color: #fff;
background-image: url('http://i64.tinypic.com/11j9dad.jpg');
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
header .header-content {
position: relative;
width: 100%;
padding: 100px 15px 70px;
text-align: center;
}
header .header-content .header-content-inner h1 {
margin-top: 0;
margin-bottom: 20px;
font-size: 50px;
font-weight: 300;
}
header .header-content .header-content-inner p {
margin-bottom: 50px;
font-size: 16px;
font-weight: 300;
color: rgba(255,255,255,.7);
}
@media(min-width:768px) {
header {
min-height: 100%;
}
header .header-content {
position: absolute;
top: 50%;
padding: 0 50px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
header .header-content .header-content-inner {
margin-right: auto;
margin-left: auto;
max-width: 1000px;
}
header .header-content .header-content-inner h1 {
font-size: 100px;
}
header .header-content .header-content-inner p {
margin-right: auto;
margin-left: auto;
max-width: 80%;
font-size: 18px;
}
}
.section-heading {
margin-top: 0;
margin-bottom: 20px;
}
.intro {
color: #fff;
background-color: yellowgreen;
padding: 70px 0;
text-align: center;
}
.content {
padding: 100px 0;
}
.content-2 {
color: #fff;
background-color: #222;
}
.content-3 {
padding: 20px 0 40px;
text-align: center;
}
.promo,
.promo h3,
.promo a:link,
.promo a:visited,
.promo a:hover,
.promo a:active {
color: white;
text-shadow: 0px 0px 40px black;
text-decoration: none;
}
.promo-item {
height: 200px;
line-height: 180px;
text-align: center;
}
.promo-item:hover {
background-size: 110%;
border: 10px solid rgba(255,255,255,0.3);
line-height: 160px;
}
.promo-item h3 {
font-size: 40px;
display: inline-block;
vertical-align: middle;
}
.item-1 {
background: url('../images/writing.jpg');
}
.item-2 {
background: url('../images/concert.jpg');
}
.item-3 {
background: url('../images/pencil_sharpener.jpg');
}
.item-1,
.item-2,
.item-3 {
background-size: cover;
background-position: 50% 50%;
}
.page-footer {
text-align: center;
}
.page-footer .contact {
padding: 100px 0;
background-color: yellowgreen;
color: #fff;
}
.page-footer .contact p {
font-size: 22px;
font-weight: 300;
}
.content-3 .glyphicon,
.page-footer .contact .glyphicon {
font-size: 32px;
font-weight: 700;
}
.page-footer .small-print {
padding: 50px 0 40px;
font-weight: 300;
}
.text-light {
color: rgba(255,255,255,.7);
}
.navbar-default {
border-color: rgba(34,34,34,.05);
background-color: #fff;
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}
.navbar-default .navbar-header .navbar-brand {
color: yellowgreen;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
color: #222;
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
color: yellowgreen;
}
.navbar-default .nav > li.active>a,
.navbar-default .nav>li.active>a:focus {
color: yellowgreen!important;
background-color: transparent;
}
.navbar-default .nav > li.active>a:hover,
.navbar-default .nav>li.active>a:focus:hover {
background-color: transparent;
}
@media(min-width:768px) {
.navbar-default {
border-color: rgba(255,255,255,.3);
background-color: transparent;
}
.navbar-default .navbar-header .navbar-brand {
color: rgba(255,255,255,.7);
letter-spacing: 0.5em;
}
.navbar-default .navbar-header .navbar-brand:hover,
.navbar-default .navbar-header .navbar-brand:focus {
color: #fff;
}
.navbar-default .nav > li>a,
.navbar-default .nav>li>a:focus {
color: rgba(255,255,255,.7);
}
.navbar-default .nav > li>a:hover,
.navbar-default .nav>li>a:focus:hover {
color: #fff;
}
.navbar-default.affix {
border-color: #fff;
background-color: #fff;
box-shadow: 0px 7px 20px 0px rgba(0,0,0,0.1);
}
.navbar-default.affix .navbar-header .navbar-brand {
letter-spacing: 0;
color: yellowgreen;
}
.navbar-default.affix .navbar-header .navbar-brand:hover,
.navbar-default.affix .navbar-header .navbar-brand:focus {
color: #eb3812;
}
.navbar-default.affix .nav > li>a,
.navbar-default.affix .nav>li>a:focus {
color: #222;
}
.navbar-default.affix .nav > li>a:hover,
.navbar-default.affix .nav>li>a:focus:hover {
color: yellowgreen;
}
}
.btn-default {
border-color: #fff;
color: #222;
background-color: #fff;
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
border-color: #eee;
color: #222;
background-color: #eee;
}
.btn-default:active,
.btn-default.active,
.open > .dropdown-toggle.btn-default {
background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled.focus,
.btn-default[disabled].focus,
fieldset[disabled] .btn-default.focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
border-color: #fff;
background-color: #fff;
}
.btn-default .badge {
color: #fff;
background-color: #222;
}
.btn-primary {
border-color: yellowgreen;
color: #fff;
background-color: yellowgreen;
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
border-color: limegreen;
color: #fff;
background-color: limegreen;
}
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary {
background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled.focus,
.btn-primary[disabled].focus,
fieldset[disabled] .btn-primary.focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
border-color: yellowgreen;
background-color: yellowgreen;
}
.btn-primary .badge {
color: yellowgreen;
background-color: #fff;
}
.btn {
border-radius: 300px;
text-transform: uppercase;
}
.btn-lg {
padding: 15px 30px;
}
::-moz-selection {
text-shadow: none;
color: #fff;
background: #222;
}
::selection {
text-shadow: none;
color: #fff;
background: #222;
}
img::selection {
color: #fff;
background: 0 0;
}
img::-moz-selection {
color: #fff;
background: 0 0;
}
.text-primary {
color: yellowgreen;
}
.bg-primary {
background-color: yellowgreen;
}
<!DOCTYPE html>
<!-- Template by Quackit.com -->
<!-- Imágenes de diversas fuentes bajo la licencia Creative Commons CC0 y / o la licencia Creative Commons Zero.
Aunque puede usarlos, para un sitio web más exclusivo, reemplace estas imágenes por las suyas.-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- -Las 3 metaetiquetas anteriores * deben * ser lo primero en la cabeza; cualquier otro contenido principal debe venir * después * de estas etiquetas-->
<title>Principal</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- CSS personalizado: puede usar esta hoja de estilo para anular cualquier estilo de Bootstrap y / o aplicar sus propios estilos -->
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 Shim y Respond.js Compatibilidad con IE8 de elementos HTML5 y consultas de medios -->
<!-- ADVERTENCIA: Respond.js no funciona si ves la página a través de un archivo:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Fuentes personalizadas de Google-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<script>
$( ".dropdown-toggle" ).hover(
function() {
// hover in
$( this ).next('.dropdown-menu').show("slow");
}, function() {
// hover out
var menuHover = !$(this).next(".dropdown-menu").is(":hover");
if (menuHover) {
$( this ).next('.dropdown-menu').hide("slow");
}
}
);
$(".dropdown-menu").mouseleave(function () {
if (!$(this).prev().is(":hover")) {
$(this).hide("slow");
}
});
</script>
</head>
<body>
<!-- Navegación-->
<nav id="siteNav" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Logo and responsive toggle -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-fire"></span>
LOGO
</a>
</div>
<!-- Navbar links -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="Principal.html">CASA</a>
</li>
<li>
<a href="#">RECURSOS</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">SOBRE MI <span class="caret"></span></a>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li><a target="_blank" href="https://www.google.es/maps/place/Calle+del+Olivar,+5,+05400+La+Parra,+%C3%81vila/@40.224582,-5.0602472,17z/data=!3m1!4b1!4m5!3m4!1s0xd40756225aeabbd:0xcc0228cc3c4de2c8!8m2!3d40.2245779!4d-5.0580585?hl=es">UBICACION</a></li>
<li><a href="#">PROYECTOS</a></li>
<li><a href="#">CURRICULUM</a></li>
</ul>
</li>
<li>
<a href="Contacto.html">CONTACTO</a>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<!-- Header -->
<header>
<div class="header-content">
<div class="header-content-inner">
<h1>CONTACTE CONMIGO</h1>
</div>
</div>
</header>
<!-- Intro Section -->
<section class="intro">
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<!--<span class="glyphicon glyphicon-apple" style="font-size: 60px"></span>-->
<h2 class="section-heading">Le hacemos una auditoría gratuita para ver lo que más se adapta a su negocio.</h2>
<p class="text-light">Hacemos seguimiento del funcionamiento de su aplicación y corregimos lo que usted desee.</p>
</div>
</div>
</div>
</section>
<!-- jQuery -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="js/jquery.easing.min.js"></script>
<!-- Custom Javascript -->
<script src="js/custom.js"></script>
</body>
</html>
Porque no hacés la prueba de colocar la función en el nav donde esta:
quedando:
Good friend, I do not know if it is what you are looking for but it works perfectly, the only thing you have to do is comment on the function
Que te da el error espero te ayude saludos, Para observar el funcionamiento agranda el ejemplo.