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>

\$\endgroup\$
0

1 Answer 1

Reset to default
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
}
\$\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\$
    – Spencer Fleming
    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\$
    – Spencer Fleming
    Commented May 30, 2015 at 5:28

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.