Dan Dan - 6 months ago 14
CSS Question

Tidying up css code

I have a

.css
file for my website which does all the formatting for the side navigation bar. The only problem is that it looks messy and it seems to be inefficient as I kept on having to copy the same code again and again only to change one or two value per slide pop out. I am wanting to know how I could make it neater and more efficient.

This is what the relevant css code looks like

nav {
display: block;
color:white;
border:2px;
border-color:aqua;
border-style:solid;
border-right-style:none;
padding:10px;
text-transform: uppercase;
}

/*First nav box*/

#topnav {
top: 100px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:white;
border-bottom-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}

#topnav:hover span {display:none}

#topnav:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
color:white;
}

#topnav:hover:before {
content:"Top";
}

/*Second nav box*/

#nav2 {
top: 140px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:red;
border-bottom-style:none;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}

#nav2:hover span {display:none}

#nav2:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
border-top-style:solid;
color:white;
}

#nav2:hover:before {
content:"Red";
}


/*Third nav box*/

#nav3 {
top: 180px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:blue;
border-bottom-style:none;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}

#nav3:hover span {display:none}

#nav3:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
border-top-style:solid;
color:white;
}

#nav3:hover:before {
content:"blue";
}

/*Fourth nav box*/

#nav4 {
top: 220px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:green;
border-bottom-style:none;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}

#nav4:hover span {display:none}

#nav4:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
border-top-style:solid;
color:white;
}

#nav4:hover:before {
content:"green";
}

/*Fifth nav box*/

#nav5 {
top: 260px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:purple;
border-bottom-style:none;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}

#nav5:hover span {display:none}

#nav5:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
border-top-style:solid;
color:white;
}

#nav5:hover:before {
content:"purple";
}

/*Sixth nav box*/

#nav6 {
top: 300px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:orange;
border-bottom-style:none;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}

#nav6:hover span {display:none}

#nav6:hover {
width:3cm;
background-color:black;
border-bottom-style:solid;
border-top-style:solid;
color:white;
}

#nav6:hover:before {
content:"orange";
}

/*Bot nav box*/

#botnav {
top: 340px;
right: 0px;
position: fixed;
z-index: 3000;
background-color:white;
border-top-style:none;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
vertical-align:
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}

#botnav:hover span {display:none}

#botnav:hover {
width:3cm;
background-color:black;
border-top-style:solid;
color:white;
}

#botnav:hover:before {
content:"200";
}


Also here is a JSFiddle with the code in practice to show you what it looks like. Also if I need to change the HTML to make the css more efficient let me know.

Thanks for any help

Edit

So based off Darren's answer and Stafox's answer, I have condensed the code to this.

nav {
display: block;
color:white;
border:2px;
border-color:aqua;
border-left-style:solid;
padding:10px;
text-transform: uppercase;
right: 0px;
position: fixed;
z-index: 3000;
width:20px;
height:20px;
line-height: 20px;
text-align:center;
-webkit-transition: 250ms all ease-out;
transition: 250ms all ease-out;
color:black;
}

#topnav:hover, #nav2:hover, #nav3:hover,
#nav4:hover, #nav5:hover, #nav6:hover,
#botnav:hover {
z-index:5000;
width:3cm;
background-color:black;
border-style:solid;
border-right-style:none;
color:white;
}

nav:hover span
{
display:none
}

/*First nav box*/
#topnav {
top: 100px;
background-color:white;
border-top-style:solid;
}

#topnav:hover:before {
content:"Top";
}

/*Second nav box*/

#nav2 {
top: 140px;
background-color:red;
}

#nav2:hover:before {
content:"Red";
}


/*Third nav box*/

#nav3 {
top: 180px;
background-color:blue;
}

#nav3:hover:before {
content:"blue";
}

/*Fourth nav box*/

#nav4 {
top: 220px;
background-color:green;
}

#nav4:hover:before {
content:"green";
}

/*Fifth nav box*/

#nav5 {
top: 260px;
background-color:purple;
}

#nav5:hover:before {
content:"purple";
}

/*Sixth nav box*/

#nav6 {
top: 300px;
background-color:orange;
}

#nav6:hover:before {
content:"orange";
}

/*Bot nav box*/

#botnav {
top: 340px;
background-color:white;
border-bottom-style:solid;

}

#botnav:hover:before {
content:"200";
}


Here is a JSFiddle of it in use.

Are there any other suggestions?

Answer

You could group the common navigational elements within a CSS class.

For instance, your topnav, nav2, nav3, nav4 and nav5 all have the following in common:

  • Colour
  • Position
  • Transition
  • Right
  • Border
  • Line height

So it may make more sense to have a base element with these styles rather than repeating them.

.navigation-base {
    color: black;
    position: fixed;
    transition: 250ms all ease-out;
    right: 0px;
}

And then apply the navigation-base to all navigational elements and then add an additional class where they differ.

.navigation-unsuccessful {
   background-color: red;
}

.navigation-success {
   background-color: green;
}

<nav class="navigation-base navigation-success">
  <!-- Navigational components -->
</nav>
Comments