Currently, I am working on a project for my Information Technology coursework and struggling with creating a horizontal drop-down menu. If anyone has an example of such a menu that I could integrate into my site, I would greatly appreciate it! :D
<!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">☰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>
The above HTML code is what I currently have. If needed, I can also provide the stylesheet for reference.
Thank you in advance for any assistance, Cro