2016-12-06 10 views
-2

Ich arbeite an einem Projekt, das ich später in meiner Informatik-Kursarbeit verwenden kann. Ich habe versucht, ein horizontales Drop-Down-Menü zu erstellen, kann aber keine Lösung finden. So .... wenn jemand mich mit einem Beispiel eines solchen Menüs bieten könnte zu meiner Website hinzufügen, dass groß sein würde: DErstellen eines horizontalen Dropdown-Menüs

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset='UTF-8'/> 

<link rel="stylesheet" type="text/css" href="main.css" /> 
<link href='http://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope' rel='stylesheet' type='text/css'> 

</head> 
<body> 



<div id="header" style="font-family: A Sensible Armadillo; font-size: 28px; font-weight: 500;"> 
    <div id="nav"> 
     <a id="navicon" href="#menu">&#9776;Menu</a> 
     <a id="dropdown" href="#about">About</a> 
     <a id="dropdown" href="#portfolio">Portfolio</a> 
     <a id="dropdown" href="#contact">Contact</a> 
    </div> 
</div> 

<div id="page-wrap"> 

    <div id="page1"> 
     <a name="about"></a> 
     <div class="page-padding"></div> 

    </div> 

    <div id="page2"> 
     <a name="portfolio"></a> 
     <div class="page-padding"></div> 

    </div> 

    <div id="page3"> 
     <a name="contact"></a> 
     <div class="page-padding"></div> 

    </div> 

</div> 

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 
    function filterPath(string) { 
    return string 
     .replace(/^\//,'') 
     .replace(/(index|default).[a-zA-Z]{3,4}$/,'') 
     .replace(/\/$/,''); 
    } 
    $('a[href*=#]').each(function() { 
    if (filterPath(location.pathname) == filterPath(this.pathname) 
    && location.hostname == this.hostname 
    && this.hash.replace(/#/,'')) { 
     var $targetId = $(this.hash), $targetAnchor = $('[name=' +  this.hash.slice(1) +']'); 
     var $target = $targetId.length ? $targetId : $targetAnchor.length ?  $targetAnchor : false; 
     if ($target) { 
     var targetOffset = $target.offset().top; 
     $(this).click(function() { 
      $('html, body').animate({scrollTop: targetOffset}, 2000); 
      return false; 
     }); 
     } 
    } 
    }); 
}); 
</script> 

</body> 
</html> 

Über meinem aktuellen HTML-Code ist, lassen Sie mich wissen, ob jemand möchte, dass ich ihnen auch mein Stylesheet zur Verfügung stelle.

Vielen Dank im Voraus für alle Antworten, Cro

+2

Anstatt nach einem Beispiel zu fragen, sollten Sie uns sagen, was Sie versucht haben und was nicht. – Lexi

Antwort

0

Bootstrap hat für diese Unterstützung sowie eine Tonne anderer großer navs, können Sie es überprüfen hier aus http://getbootstrap.com/components/#dropdowns

Der Kern von ihm aussehen würde, dies für Ihren Code

<div class="dropdown"> 
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"> 
Dropdown 
<span class="caret"></span> 
</button> 
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> 
     <li><a id="navicon" href="#menu">&#9776;Menu</a></li> 
     <li><a id="dropdown" href="#about">About</a></li> 
     <li><a id="dropdown" href="#portfolio">Portfolio</a></li> 
     <li><a id="dropdown" href="#contact">Contact</a></li> 
    </ul> 
</div> 

müssen Sie diese mit Ihren anderen Sheets/javascript enthalten

<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 

<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
+0

Ok, danke dafür. Ich versuche nur, es jetzt in den HTML zu integrieren. Ran in ein kleines Problem, jedoch. Die Dropdown-Box erscheint zwar auf der Website, aber wenn sie angeklickt wird, wird sie nicht gelöscht. Gibt es CSS, das ich hinzufügen muss? –

Verwandte Themen