Skip to content

Instantly share code, notes, and snippets.

@zedd45

zedd45/engadget.html

Created November 14, 2014 21:03
Show Gist options
  • Save zedd45/503deb7053b337b6ca33 to your computer and use it in GitHub Desktop.
Save zedd45/503deb7053b337b6ca33 to your computer and use it in GitHub Desktop.
Download ZIP
Frontend Masters: Jonathan Snook / SMACSS Engadget Menu Exercise
Raw
engadget.html
<!DOCTYPE html>
<html>
<head>
<title>Snook Engadget Menu Exercise</title>
<!-- <link rel="stylesheet" href="smacss-endgaget.css"/> -->
<style type="text/css">
/*
we should separate out the modules into different classnames.
they shouldn't intermingle;
*/
nav {
width: 100%;
}
nav ul {
list-style-type: none;
display: inline-block;
}
nav li {
display: inline-block;
}
.nav-dropdown {
/*position: relative;*/
}
.nav-dropdown .dropdown {
opacity: 0;
position: absolute;
}
.nav-dropdown .dropdown img {
display: none;
}
.nav-dropdown .dropdown ul {
margin: 0;
padding: 0;
}
.nav-dropdown .dropdown li {
display: block;
}
.nav-dropdown:hover .dropdown {
opacity: 1;
transition: all 2s;
}
.nav-dropdown.horizontal .dropdown {
width: 100%;
left: 0;
}
.nav-dropdown.horizontal .dropdown li {
display: inline-block;
}
.nav-dropdown.horizontal li:hover img {
display: inline-block;
}
</style>
</head>
<body>
<nav>
<ul class="nav-dropdown horizontal">
<li>
stuff
<ul class="dropdown">
<li>
<img src="http://lorempixel.com/400/200/abstract/1">
</li>
<li>
<img src="http://lorempixel.com/400/200/abstract/2">
</li>
<li>
<img src="http://lorempixel.com/400/200/abstract/3">
</li>
</ul>
</li>
<li>
stuff
<ul class="dropdown">
<li>
<img src="http://lorempixel.com/400/200/abstract/4">
</li>
<li>
<img src="http://lorempixel.com/400/200/abstract/5">
</li>
<li>
<img src="http://lorempixel.com/400/200/abstract/6">
</li>
</ul>
</li>
<li>
stuff
<ul class="dropdown">
<li>
<img src="http://lorempixel.com/400/200/abstract/7">
</li>
<li>
<img src="http://lorempixel.com/400/200/abstract/8">
</li>
<li>
<img src="http://lorempixel.com/400/200/abstract/9">
</li>
</ul>
</li>
</ul>
<ul class="nav-dropdown">
<li> dropdown
<ul class="dropdown">
<li>
something
</li>
<li>
something
</li>
<li>
darkside
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment