css - para - menu desplegable sin javascript
Menú desplegable de Twitter Bootstrap (6)
Debes incluir jQuery en el proyecto.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
No encontré ningún documento sobre esto, así que abrí un ejemplo de código aleatorio de tutorialrepublic.com http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php
Espero que esto ayude a alguien más.
Estoy tratando de usar el menú desplegable de Twitter Bootstrap en su barra de navegación superior. Puedes ver un ejemplo trabajando aquí. http://twitter.github.com/bootstrap/#
En la mía, la flecha que indica que es un menú desplegable se muestra en el menú, pero cuando hago clic o lo hago sobre él, no se muestran mis enlaces desplegables. Creo que he incluido todas las clases necesarias, y no creo que Twitter requiera JavaScript.
¿Puedes ver lo que estoy haciendo mal?
Mi desplegable
<div class=''topbar'' data-dropdown="dropdown">
<div class=''fill''>
<div class=''container''>
<ul class="nav">
<li><%= link_to ''Home'', main_app.root_path %></li>
<li><%= link_to ''Outlines'', main_app.outlines_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Assessment</a>
<ul class="dropdown-menu">
<li><a href="#">second link </a></li>
<li><a href="#">third link </a></li>
</ul>
</li>
..... I go on to close all the divs etc. The nav bar looks great but the dropdown just doesn''t work.
Twitter Bootstrap
<div class="topbar" data-dropdown="dropdown">
<div class="topbar-inner">
<div class="container">
<h3><a href="#">Project Name</a></h3>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
<form class="pull-left" action="">
<input type="text" placeholder="Search">
</form>
<ul class="nav secondary-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle">Dropdown</a>
<ul class="dropdown-menu">
<li><a href="#">Secondary link</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Another link</a></li>
</ul>
</li>
</ul>
</div>
</div><!-- /topbar-inner -->
</div>
En realidad, requiere la inclusión de Twitter Bootstrap''s dropdown.js
También es posible personalizar tu compilación bootstrap usando:
http://twitter.github.com/bootstrap/customize.html
Todos los complementos están incluidos por defecto.
Tuve un problema similar y fue la versión de bootstrap.js incluida en mi proyecto de estudio visual. Me enlazé aquí y funcionó muy bien.
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<!-- core CSS -->
<link href="http://webdesign9.in/css/bootstrap.min.css" rel="stylesheet">
<link href="http://webdesign9.in/css/font-awesome.min.css" rel="stylesheet">
<link href="http://webdesign9.in/css/responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
</head><!--/head-->
<body class="homepage">
<header id="header">
<nav class="navbar navbar-inverse" role="banner">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<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" title="Web Design Company in Mumbai" href="index.php"><img src="images/logo.png" alt="The Best Web Design Company in Mumbai" /></a>
</div>
<div class="collapse navbar-collapse navbar-right">
<ul class="nav navbar-nav">
<li class="active"><a href="index.php">Home</a></li>
<li><a href="about.php">About Us</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="term-condition.php">Terms & Condition</a></li></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div>
</div><!--/.container-->
</nav><!--/nav-->
</header><!--/header-->
<script src="http://webdesign9.in/js/jquery.js"></script>
<script src="http://webdesign9.in/js/bootstrap.min.js"></script>
</body>
</html>
<script type="text/javascript" src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>