3
\$\begingroup\$

I made a MS Word style ribbon header, but it all seems very hacky, and I'm not really sure how to simplify it to something more reasonable. Rolling over one of the navigation icons changes the related z-index to positive revealing it. Then, on hover it changes its own z-index to remain positive keeping it up even when the mouse is no longer on the icon. If there is a better way to do this, or some way to simplify the html, I would love to hear it.

On a website

Jsfiddle: 

body {
	margin:0;
	background-color:#E8E8E8;
}
.stripe {
	height:1.5em;
	background-color:#4A4A4A;
}
header {
	background-color:#D5D5D5;
}
.banner {
	border-top:0.5em solid black;
	border-bottom:0.5em solid black;
	height:7em;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
}
#logo {
	padding-left:3em;
 height:60px;
	width:240px;
}
#slogan {
	font-family: 'Contrail One', cursive;
	font-size:2em;
	padding-left:5%;
	margin-left:1em;
	font-weight:bold;
}
nav {
	background-color:#4A4A4A;
	margin:0;
	width:100%;
	height:2em;
	text-align:center;
	display: flex;
	flex-direction:row;
	justify-content: space-between;
	align-items:center;
}
.navItem {
	font-family: 'Contrail One', cursive;
	color:white;
	padding:0.5em;
	height:2em;
	display:flex;
	flex-direction:column;
	justify-content:center;
	flex-grow:1;
}
.spacer {
	padding:1.5em;
	flex-grow:1;
}
.navItem:hover {
	height:2em;
	padding-top:0.5em;
	padding-bottom:0;
	padding-left:0;
	padding-right:0;
	border-top:0;
	border-bottom:.5em solid black;
	border-left:.5em solid black;
	border-right:.5em solid black;
	background-color:#D5D5D5;
	color:black;
}
.navItem:active {
	background-color:#E8E8E8;
}
.itemContentsContainer {
	background-color:transparent;
	position:absolute;
	height:7.2em;
	width:100%;
	top:1.75em;
	left:0%;
	z-index:-1;
}
#fauxgo {
	margin-left:3em;
	width:240px;
}
.itemContents {
	height:7em;
	display:flex;
	flex-direction:row;
	justify-content:flex-start;
	align-items:center;
	padding-left:1.5em;
}
.item {
	background-color:#D5D5D5;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:flex-start;
	flex-grow:1;
	height:3.5em;
	margin-bottom:-.25em;
	font-family: 'Contrail One', cursive;
	font-size:2em;
	padding-left:5%;
	margin-left:1em;
	font-weight:bold;
}
.itemContentsContainer:hover {
	z-index:1;
}
.navItem#Homepage:hover ~ .itemContentsContainer#HomepageContents{
	z-index:1;
}
.navItem#Weblog:hover ~ .itemContentsContainer#WeblogContents{
	z-index:1;
}
.navItem#Projects:hover ~ .itemContentsContainer#ProjectsContents{
	z-index:1;
}
.navItem#KidsKorner:hover ~ .itemContentsContainer#KidsKornerContents{
	z-index:1;
}
<!DOCTYPE html>
<link href='http://fonts.googleapis.com/css?family=Contrail+One' rel='stylesheet' type='text/css'>
<html>
	<head>
	<meta charset="UTF-8">
	<title>Spentronics</title>
	<link rel="stylesheet" href="mainstyle.css">
	</head>
	<header>
			<div class="stripe">
			</div>
			<div class="banner"> 
			<img src="SpentronicsFullSC.svg" alt="Spentronics" id="logo"/>
			<div id="slogan">
				Slogan
			</div>
		</div>
			<nav>
			
			
				<div class="spacer">
				</div>
				<div class="navItem" id="Homepage"> 
					Homepage
				</div>
				<div class="navItem" id="Weblog">
					Weblog
				</div>
				<div class="navItem" id="Projects">
					Projects
				</div>
				<div class="navItem" id="KidsKorner">
					Kid's Korner
				</div>
				<div class="spacer">
				</div>
				
				
				<div class="itemContentsContainer" id="HomepageContents">
					<div class=itemContents>
						<div id=fauxgo>
						</div>
						<div class="item">
							Homepage
						</div>
					</div>
				</div>
				<div class="itemContentsContainer" id="WeblogContents">
					<div class=itemContents>
						<div id=fauxgo>
						</div>
						<div class="item">
							Weblog
						</div>
					</div>
				</div>
				<div class="itemContentsContainer" id="ProjectsContents">
					<div class=itemContents>
						<div id=fauxgo>
						</div>
						<div class="item">
							Project
						</div>
					</div>
				</div>
				<div class="itemContentsContainer" id="KidsKornerContents">
					<div class=itemContents>
						<div id=fauxgo>
						</div>
						<div class="item">
							For the younglings
						</div>
					</div>
				</div>
			</nav>
	</header>
	<body>
		content shmontent
	</body>
</html>

Jamal
35.2k13 gold badges134 silver badges238 bronze badges
asked May 29, 2015 at 20:53
\$\endgroup\$
0

1 Answer 1

6
\$\begingroup\$

Validation

The markup has validation errors (duplicate IDs, stray starting tags caused by improperly nested elements).

Overqualification

If you're using IDs, you don't need to attach the class to the selector unless you need to increase the specificity.

.navItem#Homepage:hover ~ .itemContentsContainer#HomepageContents{
 z-index:1;
}
.navItem#Weblog:hover ~ .itemContentsContainer#WeblogContents{
 z-index:1;
}
.navItem#Projects:hover ~ .itemContentsContainer#ProjectsContents{
 z-index:1;
}
.navItem#KidsKorner:hover ~ .itemContentsContainer#KidsKornerContents{
 z-index:1;
}

Simplifies to

#Homepage:hover ~ #HomepageContents{
 z-index:1;
}
#Weblog:hover ~ #WeblogContents{
 z-index:1;
}
#Projects:hover ~ #ProjectsContents{
 z-index:1;
}
#KidsKorner:hover ~ #KidsKornerContents{
 z-index:1;
}

This doesn't actually matter because...

Holy excessive markup

The amount of markup you have here is astonishing, and not in a good way. You've got spacer divs and everything, I haven't seen that since the table layout days.

Your markup can be simplified to this:

<nav>
 <dl>
 <dt>Homepage</dt>
 <dd>Sure is a homepage, alright</dd>
 <dt>Weblog</dt>
 <dd>Looks suspiciously like a weblog</dd>
 <dt>Projects</dt>
 <dd>Project stuff here</dd>
 <dt>Kid's Korner</dt>
 <dd>For the younglings</dd>
 </dl>
</nav>

You can get the same appearance by drastically simplifying the CSS, too (I've gutted some of the styles to make it simpler to test this, you can add back in flexbox and some of that other stuff):

nav {
 background-color:#4A4A4A;
 margin:0;
 width:100%;
 height:2em;
 text-align:center;
 font-family: 'Contrail One', cursive;
 color:white;
}
dl {
 margin: 0;
}
dt {
 padding:0.5em;
 height:2em;
 display: inline-block;
}
dt:hover {
 height:2em;
 padding:0.5em 0 0 0;
 border:.5em solid;
 border-top:0;
 background-color:#D5D5D5;
 color:black;
 margin-top: -1em; /* border-width + your finished padding */
 padding-top: 1em;
}
dt:active {
 background-color:#E8E8E8;
}
dd {
 display: none;
}
dt:hover + dd {
 display: block;
 position: absolute;
 top: 50px; /* number picked at random */
 right: 0;
 z-index: 1
}
answered May 29, 2015 at 23:05
\$\endgroup\$
2
  • \$\begingroup\$ Dude, this is fantastic! Thank you so much, I knew the number of <div>s was way too high, but didn't think it could get that small. I'm going to report back soon with the rest of the styles back in just to tidy up loose ends. Thanks for the help :) \$\endgroup\$ Commented May 29, 2015 at 23:18
  • 1
    \$\begingroup\$ I finished most to the integrating using your advice, the tidied version is 25 less lines of css and 56 less lines of html. Thanks for everything! \$\endgroup\$ Commented May 30, 2015 at 5:28

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.