JavaScript | Dino Drop Down (HTML, CSS) ...

<!DOCTYPE html>
<html lang="en" >

<title>CodePen - Dino drop down</title>

.main-nav {
  padding: 0 5%;
  background: #36874f;
  background: #36874f -webkit-radial-gradient(25% 0,  #7bcba5, #36874f 71%);
  background: #36874f radial-gradient(ellipse at 25% 0, #7bcba5, #36874f 71%);
  background-repeat: no-repeat;
  background-size: 75% 100%;
}
.menu-top {
  position: relative;
  margin: 0 auto;
  min-width: 32em; width: auto; max-width: 60em;
}
.menu-top > li { 
  display: inline-block;
}
.menu-top > li > a { position: relative; }
.menu-top > li > a:after {
  position: absolute;
  right: 0; bottom: 0; left: 0;
  opacity: 0;
  font: .75em/1.45 sans-serif;
  text-align: center;
  transition: 1s;
  content: '25BC';
} 
.menu-top > li:hover > a:after { 
  opacity: 1;
}
.menu-horizontal { height: inherit; }
.menu-horizontal > li {  
  display: inline-block;
  height: inherit;
  vertical-align: top;
}
.menu-horizontal-1col > li { width: 100% }
.menu-horizontal-2col > li, 
.menu-horizontal-3col-h1 > .item-p2col {
  width: 50%; max-width: 50%;
}
.menu-horizontal-3col-h1 > li, 
.menu-horizontal-4col > li {
  width: 25%; max-width: 25%;
}
.menu-horizontal-2col > li, 
.menu-horizontal-3col-h1 > .item-p2col { width: 50% }
.menu-top > li > a {
  padding: .5em 3em;
}
.menu-tabbed {
  overflow: hidden;
  position: absolute;
  top: 100%;
  width: 100%;
  height: 0;
  transition: height 1s linear;
}
li/**/:hover/**/ .menu-tabbed {
  height: 20em;
}
.menu-tabbed > li {
  display: inline-block;
  height: 20em;
}
.menu-tabbed a { font-weight: 500;}
.menu-tabbed > li > a {
  margin: -2.5em 0 0;
  height: 2.15em;
  border-radius: 0 0 .5em .5em;
  box-shadow: 0 .1em .25em black,
    inset 0 .25em .25em -.25em black;
  transform-origin: 50% 0;
  transform: scale(.99);
  background: rgba(63, 171, 125, .7);
  text-align: center;
  text-shadow: 0 -1px black;
  transition: color .75s, background .75s, 
    text-shadow .75s,
    margin 1s linear;
}
li/**/:hover/**/ .menu-tabbed > li > a {
  margin: 17.5em 0 0;
}
.menu-tabbed:hover > li:first-child > a {
  box-shadow: 0 .1em .25em black,
    inset 0 .25em .25em -.25em black;
  background:  rgba(63, 171, 125, .7);
  color: white;
  text-shadow: 0 -1px black;
}
.menu-tabbed > li:first-child > a, 
.menu-tabbed > li:first-child:hover > a, 
.menu-tabbed > li:hover > a {
  box-shadow: 0 .1em .25em dimgrey;
  background: #dadbda;
  color: black;
  text-shadow: 0 -1px white;
}
.menu-tabbed > li > ul {
  overflow: hidden;
  position: absolute;
  bottom: 2.5em; left: 0;
  padding: 2em 0 0;
  opacity: 0;
  width: 100%; height: 17.5em;
  background: rgba(245, 245, 245, 1);
  transition: opacity .75s;
  pointer-events: none;
}
.menu-tabbed > li:first-child > ul, 
.menu-tabbed > li:hover > ul {
  opacity: 1;
  pointer-events: auto;
}
.menu-tabbed ul a {
  color: grey;
}
.menu-tabbed > li > ul > li {
  overflow: hidden;
  height: inherit;
}
.menu-tabbed img { height: 70%; width: auto; }
.menu-tabbed > li > ul > li > a:not(.sl) {
  overflow: hidden;
  color: navy;
  font: .9em/2 sans-serif;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.menu-tabbed > li > ul > li > a:hover {
  color: black;
}
.item-p2col img {
  float: left;
  margin: 0 1.25%;
  width: 47.5%; height: auto;
}
.menu-tabbed ul ul .s {
  color: black;
  font-weight: 700;
}
.menu-tabbed ul ul .s:hover { color: #36874f; }
.menu-tabbed ul ul a {
  font: .8em/1.25 sans-serif;
}
.menu-tabbed ul ul a:hover { color: black; }
.menu-tabbed > li:last-child > ul {
  margin: 0;
  padding: 0;
}
.slimg-wrap {
  display: block;
  overflow: hidden;
  margin: 0 auto;
  width: 70%;
}
.menu-tabbed > li:last-child img {
  display: inline-block;
  height: inherit;
  transform: skewX(-30deg);
}
.sl {
  overflow: hidden;
  position: absolute;
  width: 100%; height: 100%;
  transform: skewX(30deg);
  opacity: .7;
}
.sl:hover { opacity: 1; }
.sl:first-child {
  right: 50%;
  text-align: right;
}
.sl:nth-child(2) {
  left: 50%;
  text-align: left;
}
.sl:first-child img { margin-right: -5.3em; }
.sl:nth-child(2) img { margin-left: -6.7em; }
</style>

</head>

<body translate="no">
  <nav class='main-nav'>
	<ul class='menu menu-top menu-horizontal'>
		<li>
			<a href='#'>Dinosaurs</a>
			<ul class='menu menu-submenu menu-tabbed menu-horizontal-4col'>
				<li>
					<a href='#'>Thyreophorans</a>
					<ul class='menu menu-submenu menu-horizontal menu-horizontal-2col'>
						<li class='item item-p2col'>
							<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8b/Ba%C5%82t%C3%B3w_Park_Jurajski_001.jpg/320px-Ba%C5%82t%C3%B3w_Park_Jurajski_001.jpg">
							<a href='#'>Stegosaurians</a>
							<ul class='menu menu-submenu menu-vertical'>
								<li><a href='#'>Gigantspinosaurus</a></li>
								<li><a href='#'>Stegosaurus</a></li>
								<li><a href='#'>Hesperosaurus</a></li>
								<li><a href='#'>Paranthodon</a></li>
							</ul>
            </li><li>
							<a href='#'>Ankylosaurs</a>
							<ul class='menu menu-submenu menu-horizontal menu-horizontal-2col'>
								<li>
									<a href='#' class='s'>Nodosaurids</a>
									<ul class='menu menu-submenu menu-vertical'>
										<li><a href='#'>Nodosaurus</a></li>
										<li><a href='#'>Sauropelta</a></li>
									</ul>
								</li><li>
									<a href='#' class='s'>Ankylosaurids</a>
									<ul class='menu menu-submenu menu-vertical'>
										<li><a href='#'>Ankylosaurus</a></li>
										<li><a href='#'>Euoplocephalus</a></li>
										<li><a href='#'>Pinacosaurus</a></li>
									</ul>
							</ul>
					</ul>
				</li><li>
					<a href='#'>Cerapods</a>
					<ul class='menu menu-submenu menu-horizontal menu-horizontal-3col-h1'>
						<li class='item item-p2col'>
							<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Triceratops_prorsus_-_IMG_0697.jpg/320px-Triceratops_prorsus_-_IMG_0697.jpg">
							<a href='#'>Ceratopsians</a>
							<ul class='menu menu-submenu menu-vertical'>
								<li><a href='#'>Psittacosaurus</a></li>
								<li><a href='#'>Triceratops</a></li>
								<li><a href='#'>Centrosaurus</a></li>
								<li><a href='#'>Montanoceratops</a></li>
								<li><a href='#'>Styracosaurus</a></li>
								<li><a href='#'>Protoceratops</a></li>
							</ul>
						</li><li>
							<a href='#'>Ornithopods</a>
							<ul class='menu menu-submenu menu-vertical'>
								<li><a href='#'>Shantungosaurus</a></li>
								<li><a href='#'>Iguanodon</a></li>
								<li><a href='#'>Macrogryphosaurus</a></li>
								<li><a href='#'>Thescelosaurus</a></li>
								<li><a href='#'>Othnielosaurus</a></li>
								<li><a href='#'>Notohypsilophodon</a></li>
								<li><a href='#'>Eucercosaurus</a></li>
							</ul>
						</li><li>
							<a href='#'>Pachycephalosaurs</a>
							<ul class='menu menu-submenu menu-vertical'>
								<li><a href='#'>Stegoceras</a></li>
								<li><a href='#'>Dracorex</a></li>
							</ul>
						</li>
					</ul>
				</li><li>
					<a href='#'>Theropods</a>
					<ul class='menu menu-submenu menu-horizontal menu-horizontal-4col'>
						<li>
							<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Tyrannosaurus_Rex_colored.png/320px-Tyrannosaurus_Rex_colored.png">
							<a href='#'>Tyrannosaurus rex</a>
						</li><li>
							<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Velociraptor_Wyoming_Dinosaur_Center.jpg/320px-Velociraptor_Wyoming_Dinosaur_Center.jpg">
							<a href='#'>Velociraptor</a>
						</li><li>
							<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Allosaurus_in_Baltow_20060916_1500.jpg/309px-Allosaurus_in_Baltow_20060916_1500.jpg">
							<a href='#'>Allosaurus</a>
						</li><li>
							<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Archaeopteryx_NT.jpg">
							<a href='#'>Archaeopteryx</a>
						</li>
					</ul>
				</li><li>
					<a href='#'>Sauropodomorphs</a>
					<ul class='menu menu-submenu'>
						<li class='slimg-wrap'>
							<a href='#' class='sl'>
								<img src='https://i.imgur.com/pHmrkiP.jpg'>
							</a>
							<a href='#' class='sl'>
								<img src='https://i.imgur.com/IKxQ8DU.jpg'>
							</a>
							<a href='#'>Apatosaurus</a>
						</li>
					</ul>
				</li>
			</ul>
	</ul>
</nav>
  
  
  
</body>

</html>

Comments 0

Note: