-
Notifications
You must be signed in to change notification settings - Fork 33
/
fixed-navigation-bar.html
56 lines (54 loc) · 4.71 KB
/
fixed-navigation-bar.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fixed Navigation Bar</title>
<meta name="description" content="An example of a fixed-position(sticky) top navigation bar that remains visible while the user scrolls the page.">
<meta name="author" content="Six Revisions">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->
<link rel="stylesheet" href="assets/base.css">
<link rel="stylesheet" href="fixed-navigation-bar.css">
<link rel="shortcut icon" href="http://sixrevisions.com/favicon.ico">
</head>
<body>
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<a class="sitename" href="fixed-navigation-bar.html">Fixed Nav Bar</a>
<!-- Example responsive navigation menu -->
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li><a href="//sixrevisions.com">Home</a></li>
<li><a href="//sixrevisions.com/about/">About</a></li>
<li><a href="//sixrevisions.com/contact/">Contact</a></li>
<li><a href="//twitter.com/sixrevisions">Twitter</a></li>
<li><a href="//www.facebook.com/sixrevisions">Facebook</a></li>
</ul>
</div>
</nav>
<section class="content">
<div class="description">
<h1>Fixed Navigation Bar</h1>
<p class="summary">A fixed-position (or "sticky") top navigation bar. Scroll this page to see the top navigation bar stay in place.</p>
<a class="button" href="//sixrevisions.com/css/fixed-navigation-bar/">Read the tutorial</a>
<a class="button" href="//github.com/sixrevisions/fixed-navigation-bar">View Source on GitHub</a>
</div>
</section>
<section class="some-related-articles">
<h1>Articles About Website Navigation</h1>
<p>Here are links (with excerpts) to five Six Revisions articles that talk about website navigation. (Because filler content/lorem ipsum sucks.)</p>
<h2><a href="//sixrevisions.com/user-interface/navigation-design-patterns/">Guide to Website Navigation Design Patterns</a></h2>
<p>Site navigation has a wide variety of common and familiar design patterns that can be used as a foundation for building effective information architecture for a website. This guide covers popular site navigation design patterns. For each site navigation design pattern, we discuss its common characteristics, its drawbacks, and when best to use it.</p>
<h2><a href="//sixrevisions.com/user-interface/is-it-time-to-rethink-website-navigation/">Is It Time To Rethink Website Navigation?</a></h2>
<p>One of the many beautiful things about web design is the near-limitless options available to us. Yet, still, our navigation systems seem stuck into the existing preformed solutions. For small, personal sites, a simple top horizontal navigation bar is the typical option.</p>
<h2><a href="//sixrevisions.com/web-standards/trying-navigate-website-navigation/">Trying to Navigate Website Navigation</a></h2>
<p>Having clearly labeled navigation types to choose from can help people organize the information more easily. For us professionals, having standardized nomenclature allow us to discuss and explore the subject. Even information architecture (IA) experts like Lou Rosenfeld, Steve Krug, Jesse James Garrett, and Jakob Nielsen don't agree as to what "secondary navigation" is.</p>
<h2><a href="//sixrevisions.com/user-interface/responsive-menus/">8 Ways to Add a Responsive Navigation Menu on Your Site</a></h2>
<p>There are plenty of techniques for implementing responsive navigation menus on your site. This article talks about eight excellent open source projects for building responsive navigation menus. At the end of the article, you will find a summary table that has links to the official site, demos, usage guide, and official open source repository for each project.</p>
<h2><a href="http://sixrevisions.com/usabilityaccessibility/information-architecture-101-techniques-and-best-practices/">Information Architecture 101: Techniques and Best Practices</a></h2>
<p>Without a clear understanding of how information architecture (IA) works, we can end up creating sites that are more confusing than they need to be or, worse, make our content virtually inaccessible. This guide covers the fundamentals of information architecture for organizing website content. We will look into popular IA design patterns, best practices, design techniques, and case examples.</p>
<p><a class="button-dark" href="//sixrevisions.com/css/fixed-navigation-bar/">Read the tutorial</a>
<a class="button-dark" href="//github.com/sixrevisions/fixed-navigation-bar">View Source on GitHub</a></p>
</section>
</body>
</html>