Trying to recreate this navigation menu

Hi all,

I'm trying to recreate this navigation menu. I really like it.

https://www.hyperisland.com/

I've read the CSS codes and noticed that they mainly use the CSS Transform function.

1. The nav menu is hidden from view with a negative trasnslate Y.
2. The nav menu is brought into view from the top with :active.
3. The header background colour also changes with :active.

header#header .nav-scroll{
-webkit-transform:translateY(-600%);
-moz-transform:translateY(-600%);
-o-transform:translateY(-600%);
-ms-transform:translateY(-600%);
transform:translateY(-600%);
}

#header.active .nav-scroll{
-webkit-transform:translateY(0);
-moz-transform:translateY(0);
-o-transform:translateY(0);
-ms-transform:translateY(0);
transform:translateY(0);
overflow-y:auto}

Code (markup):

However, I am not very certain about how :active is used in this case.

Is my understanding accurate?

Any help is greatly appreciated.

Thank you!

 

Not a fan of it being such a massive train wreck of how NOT to build a menu, barely fitting the screen on half my devices... but if you want to do that, there are WAY better ways of doing it -- really that :active is not the trigger, it LOOKS like it's scripttard bullshit. The markup is semantic gibberish (those are NOT content sections, they're nested links so those H2 are dumbass crap), it's relying on scripttard data-attribute bull to do generated content's job, SVG bull to do generated content's job,

... and really using translateY is a bunch of rubbish anyhow. Would be easier to use normal transitions and just change "top".

I would be using :target to implement it in modern browsers, if you want scripting for legacy browsers go ahead, but honestly I'd just leave the menu open and in place on IE8/earlier -- they should be thankful we think about them at all, and that's part of what graceful degradation is all about.

I'd likely have the markup something like this:

	<div id="top">
		<h1>Site Title</h1>
		<a href="#top" class="showMenu"></a>
		<a href="#" class="hideMenu"></a>
	<!-- #top --></div>

	<ul id="mainMenu">
		<li>
			<a href="/programs-and-courses">Programs &amp; Courses</a>
			<ul>
				<li><a href="/programs-and-courses?type=full_time_program">Full-time programs</a></li>
				<li><a href="/programs-and-courses?type=part_time_program">Part-time programs</a></li>
				<li><a href="/programs-and-courses?type=intensive_course">Intensive courses</a></li>
			</ul>
		</li><li>
			<a href="/tailored-solutions">Tailored Solutions</a>
			<ul>
				<li><a href="/tailored-solutions#how-it-works">Find out how it works</a></li>
				<li><a href="/tailored-solutions#what-our-clients-says">What our clients say</a></li>
				<li><a href="/tailored-solutions#case-studies">Case studies</a></li>
			</ul>
		</li><li>
			<a href="/collaborate-with-us">Collaborate with us</a>
			<ul>
				<li><a href="/collaborate-with-us">General Inquiries</a></li>
				<li><a href="/collaborate-with-us/become-partner">Learning Partner</a></li>
				<li><a href="/collaborate-with-us/find-an-intern">Find an intern</a></li>
				<li><a href="/collaborate-with-us/be-a-speaker">Become a speaker</a></li>
			</ul>
		</li><li>
			<a href="/community">Our Community</a>
			<ul>
				<li><a href="/community/news">Blog &amp; upcoming events</a></li>
				<li><a href="/community/people">Meet our students &amp; collaborators</a></li>
				<li><a href="/community/gallery">Student work gallery</a></li>
			</ul>
		</li><li>
			<a href="/about">About us</a>
			<ul>
				<li><a href="/about">The Hyper Island story</a></li>
				<li><a href="/about/philosophy">Philosophy</a></li>
				<li><a href="/about/locations">Locations</a></li>
				<li><a href="/about/our-people">Staff</a></li>
			</ul>
		</li><li>
			Other
			<ul>
				<li><a href="/contact">Contact</a></li>
				<li><a href="/about/faq">FAQ</a></li>
				<li><a href="/press">Press</a></li>
				<li><a href="/jobs">Job board</a></li>
				<li><a href="http://shop.hyperisland.com/">Shop</a>
			</ul>
		</li>
	</ul>

Code (markup):

Those two empty anchors being hooks for our :target state. By targeting :top we can manipulate which one is shown.

Here's a working demo of that:
http://www.cutcodedown.com/for_others/serialentre/template.html

as with all my examples, the directory:
http://www.cutcodedown.com/for_others/serialentre/

Is unlocked for easy access to the gooey bits and pieces. The big magic in the CSS:
http://www.cutcodedown.com/for_others/serialentre/screen.css

...is first to fill in the words "Show Menu" and "Hide Menu" as well as to create the icons. I find arrows more meaningful than the uselessly vague "three lines" -- though the inclusion of show/hide text is FAR more useful. Thankfully UTF-8 gives us some nice chars to play with on that front.

When it's not targeted we hide "hide menu" and show "show menu" and position the menu off the top of the screen. When top:target fires thanks to the hash link, we slide it down into position. Doing this we need to play some games with z-index, but nothing too painful.

Adding the min-height:100% wrapper makes sure that when we have a shorter page the menu still gets hidden... and might be useful if you want to implement a true min-height layout. Note this WOULD be broken positioning if your content is shorter than the menu -- adding a delayed secondary positioning or height shortening might also be in order, this is just a rough early take to show how to use :target to do this without scripting.

Personally, I prefer to use opacity fade effects instead for this sort of thing. YMMV.

-- edit -- I just added opacity to the animation effect so when content is too short the menu will be invisible and z-index will apply dominance.

 

Hey Deathshadow!

Wow thanks for your help... I will need some time to digest all of that... Thank you!