×

Welcome to TagMyCode

Please login or create account to add a snippet.
0
0
 
0
Language: HTML
Posted by: userc865b
Added: Aug 30, 2017 3:15 PM
Views: 1
Tags: html
erstellen einer Navigationsbar erstellen
show dropdown hover amp caret up
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <meta charset="utf-8">
  4.     <!-- This file has been downloaded from Bootsnipp.com. Enjoy! -->
  5.     <title>Show Dropdown Hover &amp; Caret Up - Bootsnipp.com</title>
  6.         <meta name="viewport" content="width=device-width, initial-scale=1">
  7.     <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet">
  8.     <style type="text/css">
  9.         .caret-up {
  10.     width: 0;
  11.     height: 0;
  12.     border-left: 4px solid rgba(0, 0, 0, 0);
  13.     border-right: 4px solid rgba(0, 0, 0, 0);
  14.     border-bottom: 4px solid;
  15.    
  16.     display: inline-block;
  17.     margin-left: 2px;
  18.     vertical-align: middle;
  19. }
  20.     </style>
  21.     <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
  22.     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
  23. </head>
  24. <div class="container">
  25.         <div class="row">
  26.                 <h2>Show Dropdown Hover & Caret Up</h2>
  27.        <nav class="navbar navbar-default" role="navigation">
  28.  
  29.    <!-- Brand and toggle get grouped for better mobile display -->
  30.    <div class="navbar-header">
  31.      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
  32.        <span class="sr-only">Toggle navigation</span>
  33.        <span class="icon-bar"></span>
  34.        <span class="icon-bar"></span>
  35.        <span class="icon-bar"></span>
  36.      </button>
  37.      <a class="navbar-brand" href="#">Brand</a>
  38.    </div>
  39.  
  40.    <!-- Collect the nav links, forms, and other content for toggling -->
  41.    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  42.      <ul class="nav navbar-nav">
  43.        <li class="active"><a href="#">Link</a></li>
  44.        <li><a href="#">Link</a></li>
  45.        <li class="dropdown">
  46.          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  47.          <ul class="dropdown-menu">
  48.            <li><a href="#">Action</a></li>
  49.            <li><a href="#">Another action</a></li>
  50.            <li><a href="#">Something else here</a></li>
  51.            <li class="divider"></li>
  52.            <li><a href="#">Separated link</a></li>
  53.            <li class="divider"></li>
  54.            <li><a href="#">One more separated link</a></li>
  55.          </ul>
  56.        </li>
  57.      </ul>
  58.      <form class="navbar-form navbar-left" role="search">
  59.        <div class="form-group">
  60.          <input type="text" class="form-control" placeholder="Search">
  61.        </div>
  62.        <button type="submit" class="btn btn-default">Submit</button>
  63.      </form>
  64.      <ul class="nav navbar-nav navbar-right">
  65.        <li><a href="#">Link</a></li>
  66.        <li class="dropdown">
  67.          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
  68.          <ul class="dropdown-menu">
  69.            <li><a href="#">Action</a></li>
  70.            <li><a href="#">Another action</a></li>
  71.            <li><a href="#">Something else here</a></li>
  72.            <li class="divider"></li>
  73.            <li><a href="#">Separated link</a></li>
  74.          </ul>
  75.        </li>
  76.      </ul>
  77.    </div><!-- /.navbar-collapse -->
  78.  
  79. </nav>
  80.  
  81.         </div>
  82. </div>
  83. <script type="text/javascript">
  84.    $(function(){
  85.    $(".dropdown").hover(            
  86.            function() {
  87.                $('.dropdown-menu', this).stop( true, true ).fadeIn("fast");
  88.                 $(this).toggleClass('open');
  89.                 $('b', this).toggleClass("caret caret-up");                
  90.             },
  91.             function() {
  92.                 $('.dropdown-menu', this).stop( true, true ).fadeOut("fast");
  93.                 $(this).toggleClass('open');
  94.                 $('b', this).toggleClass("caret caret-up");                
  95.             });
  96.     });
  97.    
  98. </body>
  99. </html>
  100.