1. дома
  2. Вопрос и ответ
  3. Bootstrap Drop Down Menu

Bootstrap Drop Down Menu

2015-02-21 5 views
0

Я пытаюсь сделать так, чтобы с вкладкой «Лошади» в моем NavBar выпадающее меню появляется, когда я нависаю над ним или нажимаю на него. Я хочу, чтобы на вкладке «Лошади» выпадало неупорядоченное число с «жеребятами», «кобылами» и «жеребцами» внутри него. Любая помощь приветствуется.Bootstrap Drop Down Menu

<!DOCTYPE html> 


<meta charset="utf-8"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="description" content=""> 
<meta name="author" content=""> 

<title>VS Equine - European Sport Horses</title> 

<!-- Bootstrap Core CSS --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 

<!-- Custom CSS --> 
<link href="css/business-casual.css" rel="stylesheet"> 

<!-- Fonts --> 
<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"> 
<link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css"> 

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
<!--[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]--> 


<div class="brand">VS Equine</div> 
<div class="address-bar">Viksbergs Sateri | Sodertalje, Sweden | +46-70 699 67 40</div> 

<!-- Navigation --> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed --> 
      <a class="navbar-brand" href="index.html">VS Equine</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="index.html">Home</a> 
       </li> 
       <li> 
        <a href="about.html">About</a> 
       </li> 
       <li> 
        <a href="blog.html">Horses</a> 
       </li> 
       <li> 
        <a href="USedition.html">US Edition</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

<div class="container"> 

    <div class="row"> 
     <div class="box"> 
      <div class="col-lg-12 text-center"> 
       <div id="carousel-example-generic" class="carousel slide"> 
        <!-- Indicators --> 
        <ol class="carousel-indicators hidden-xs"> 
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
        </ol> 

        <!-- Wrapper for slides --> 
        <div class="carousel-inner"> 
         <div class="item active"> 
          <img class="img-responsive img-full" src="img/slide-1.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slide-2.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slide-3.jpg" alt=""> 
         </div> 
        </div> 

        <!-- Controls --> 
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
         <span class="icon-prev"></span> 
        </a> 
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
         <span class="icon-next"></span> 
        </a> 
       </div> 
       <h2 class="brand-before"> 
        <small>Welcome to</small> 
       </h2> 
       <h1 class="brand-name">VS Equine</h1> 
       <hr class="tagline-divider"> 
       <h2> 
         <strong>European Sport Horses</strong> 
        </small> 
       </h2> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="box"> 
      <div class="col-lg-12"> 
       <hr> 
       <h2 class="intro-text text-center">We don't just breed horses 
        <strong>We raise champions!</strong> 
       </h2> 
       <hr> 
       <img class="img-responsive img-border img-left" src="img/intro-pic.jpg" alt=""> 
       <hr class="visible-xs"> 
       <p>Viksbergs Säteri driver en liten familjeuppfödning med bara några få föl som föds varje år, i regel inte mer än 5. Vårt syfte med varje föl är att det skall bli en svårklasshäst som tävlar om de stora priserna i framtiden. </p> 
       <p>Vi sysslar inte med massuppfödning! Vi är djupt specialiserade på hopphästar av den högsta kalibern. Vi använder därför enbart ston som antingen har visat sig ge fantastiska avkommor tidigare eller som själva har visat att de är av yppersta klass, helst både och.</p> 
       <p>Vi bygger på lång sikt och hållbarhet är ett av våra ledord. På det viset skapar vi hästar som har stor kapacitet, har tillit till sin ryttare, håller på lång sikt och gör det där extra för sin ryttare som är helt avgörande i de stora klasserna. Många elitryttare kan intyga att just kopplingen mellan ryttaren (människan) och hästen är helt avgörande för resultatet. Vi tror att det är detta som skapar Champions som håller på lång sikt!.</p> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="box"> 
      <div class="col-lg-12"> 
       <hr> 
       <h2 class="intro-text text-center">VS Equine 
        <strong>and partners</strong> 
       </h2> 
       <hr> 
       <p>Vi samarbetar med andra företag i hästbranchen – både i Sverige och utomlands. Vi ställer samma krav på dem som vi ställer på oss själva. Ärlighet, Öppenhet, Hållbarhet och Kvalitet är våra ledord. För att arbeta väl tillsammans behöver även våra samarbetspartners ha samma värdegrund som vi själva har. </p> 
       <p>Vårt samarbete med andra gör att vi ofta kan finna den specifika häst som en potentiell kund söker, även om vi inte har en sådan själv. Vi har möjlighet att före köpet ge hästen den speciella träning som behövs för att den skall passa sin nya ryttare. Om du funderar på att köpa en ny häst ställ därför gärna en förfrågan till oss på: [email protected]</p> 
      </div> 
     </div> 
    </div> 

</div> 
<!-- /.container --> 

<footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <p>Copyright &copy; VS Equine 2015</p> 
      </div> 
     </div> 
    </div> 
</footer> 

<!-- jQuery --> 
<script src="js/jquery.js"></script> 

<!-- Bootstrap Core JavaScript --> 
<script src="js/bootstrap.min.js"></script> 

<!-- Script to Activate the Carousel --> 
<script> 
$('.carousel').carousel({ 
    interval: 5000 //changes the speed 
}) 
</script>

источник

2015-02-21 hartjacko

+0

У вас есть Bootstrap включен правильно? Например. через включение в свой HTML? Могли бы вы предоставить эту часть кода, если так ... – cchapman

+0

Не похоже, что у вас есть полная разметка для выпадающего навигационного элемента. – hightekjonathan

ответ

0

Чтобы иметь раскрывающийся список, вам сначала понадобится разметка, чтобы сделать это, как указано here.

Разметка должна выглядеть следующим образом (Были также собираемся добавить идентификатор для настройки функции парения):

<li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="hover-drop">Horses <span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
     <li><a href="#">Foals</a></li> 
     <li><a href="#">Mares</a></li> 
     <li><a href="#">Stallions</a></li> 
     </ul> 
    </li>

Теперь для JavaScript, он будет захватывать элемент, который мы создали, чтобы отслеживать, когда мы парить (Позволяет также окружать код в инициализаторе так, чтобы она не запустится, пока все элементы запроса не завершена и документ готов):

<script> 
    $(function() { 
    $('.carousel').carousel({ 
     interval: 5000 //changes the speed 
    }) 

    $('#hover-drop').hover(function() {     
     $(this).dropdown('toggle'); 
    }); 
    }); 
</script>

Итак вся страница будет выглядеть следующим образом:

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>VS Equine - European Sport Horses</title> 

    <!-- Bootstrap Core CSS --> 
    <link href="css/bootstrap.min.css" rel="stylesheet"> 

    <!-- Custom CSS --> 
    <link href="css/business-casual.css" rel="stylesheet"> 

    <!-- Fonts --> 
    <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"> 
    <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[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]--> 
</head> 
<body> 

<div class="brand">VS Equine</div> 
<div class="address-bar">Viksbergs Sateri | Sodertalje, Sweden | +46-70 699 67 40</div> 

<!-- Navigation --> 
<nav class="navbar navbar-default" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <!-- navbar-brand is hidden on larger screens, but visible when the menu is collapsed --> 
      <a class="navbar-brand" href="index.html">VS Equine</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li> 
        <a href="index.html">Home</a> 
       </li> 
       <li> 
        <a href="about.html">About</a> 
       </li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" id="hover-drop">Horses <span class="caret"></span></a> 
        <ul class="dropdown-menu" role="menu"> 
        <li><a href="#">Foals</a></li> 
        <li><a href="#">Mares</a></li> 
        <li><a href="#">Stallions</a></li> 
        </ul> 
       </li> 
       <li> 
        <a href="USedition.html">US Edition</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav> 

<div class="container"> 

    <div class="row"> 
     <div class="box"> 
      <div class="col-lg-12 text-center"> 
       <div id="carousel-example-generic" class="carousel slide"> 
        <!-- Indicators --> 
        <ol class="carousel-indicators hidden-xs"> 
         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="1"></li> 
         <li data-target="#carousel-example-generic" data-slide-to="2"></li> 
        </ol> 

        <!-- Wrapper for slides --> 
        <div class="carousel-inner"> 
         <div class="item active"> 
          <img class="img-responsive img-full" src="img/slide-1.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slide-2.jpg" alt=""> 
         </div> 
         <div class="item"> 
          <img class="img-responsive img-full" src="img/slide-3.jpg" alt=""> 
         </div> 
        </div> 

        <!-- Controls --> 
        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> 
         <span class="icon-prev"></span> 
        </a> 
        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> 
         <span class="icon-next"></span> 
        </a> 
       </div> 
       <h2 class="brand-before"> 
        <small>Welcome to</small> 
       </h2> 
       <h1 class="brand-name">VS Equine</h1> 
       <hr class="tagline-divider"> 
       <h2> 
         <strong>European Sport Horses</strong> 
        </small> 
       </h2> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="box"> 
      <div class="col-lg-12"> 
       <hr> 
       <h2 class="intro-text text-center">We don't just breed horses 
        <strong>We raise champions!</strong> 
       </h2> 
       <hr> 
       <img class="img-responsive img-border img-left" src="img/intro-pic.jpg" alt=""> 
       <hr class="visible-xs"> 
       <p>Viksbergs Säteri driver en liten familjeuppfödning med bara några få föl som föds varje år, i regel inte mer än 5. Vårt syfte med varje föl är att det skall bli en svårklasshäst som tävlar om de stora priserna i framtiden. </p> 
       <p>Vi sysslar inte med massuppfödning! Vi är djupt specialiserade på hopphästar av den högsta kalibern. Vi använder därför enbart ston som antingen har visat sig ge fantastiska avkommor tidigare eller som själva har visat att de är av yppersta klass, helst både och.</p> 
       <p>Vi bygger på lång sikt och hållbarhet är ett av våra ledord. På det viset skapar vi hästar som har stor kapacitet, har tillit till sin ryttare, håller på lång sikt och gör det där extra för sin ryttare som är helt avgörande i de stora klasserna. Många elitryttare kan intyga att just kopplingen mellan ryttaren (människan) och hästen är helt avgörande för resultatet. Vi tror att det är detta som skapar Champions som håller på lång sikt!.</p> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="box"> 
      <div class="col-lg-12"> 
       <hr> 
       <h2 class="intro-text text-center">VS Equine 
        <strong>and partners</strong> 
       </h2> 
       <hr> 
       <p>Vi samarbetar med andra företag i hästbranchen – både i Sverige och utomlands. Vi ställer samma krav på dem som vi ställer på oss själva. Ärlighet, Öppenhet, Hållbarhet och Kvalitet är våra ledord. För att arbeta väl tillsammans behöver även våra samarbetspartners ha samma värdegrund som vi själva har. </p> 
       <p>Vårt samarbete med andra gör att vi ofta kan finna den specifika häst som en potentiell kund söker, även om vi inte har en sådan själv. Vi har möjlighet att före köpet ge hästen den speciella träning som behövs för att den skall passa sin nya ryttare. Om du funderar på att köpa en ny häst ställ därför gärna en förfrågan till oss på: [email protected]</p> 
      </div> 
     </div> 
    </div> 
    </div> 
    <!-- /.container --> 

    <footer> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-12 text-center"> 
       <p>Copyright &copy; VS Equine 2015</p> 
      </div> 
     </div> 
     </div> 
    </footer> 

    <!-- jQuery --> 
    <script src="js/jquery.js"></script> 

    <!-- Bootstrap Core JavaScript --> 
    <script src="js/bootstrap.min.js"></script> 

    <!-- Script to Activate the Carousel And add hover --> 
    <script> 
     $(function() { 
     $('.carousel').carousel({ 
      interval: 5000 //changes the speed 
     }); 

     $('#hover-drop').hover(function() {     
      $(this).dropdown('toggle'); 
     }); 
     }); 
    </script> 
    </body> 
</html>

Кроме того, правильное форматирование кода в вопросах также поможет в замечении, что не так.

источник

2015-02-21 23:39:08 hightekjonathan

+0

Не проблема. Надеюсь, он будет работать, как вы надеетесь. – hightekjonathan

+0

Я довольно новичок в StackOverflow и не могу «перекрыть» ваш ответ, иначе вы знаете, что я буду поддерживать этот ответ весь день! – hartjacko

+0

Так что я просто попытался реализовать изменения, и меню все еще не сбрасывается, когда я нахожусь на вкладке «лошади». Любые другие идеи? – hartjacko

Смежные вопросы

 Смежные вопросы