Table of Contents
Another post from CSS tips and tricks just arrived! Challenge for today is to create accordion menu only with HTML and CSS. No JavaScript or jQuery or any other library are allowed. To make it a bit more classy, we will also add a fading effect to browsing between individual sections. Let’s dive into code…
To make it more Design related, we will create catalog-like bios of three great graphic designers – Massimo Vignelli, Saul Bass and Paul Rand. Bios will include profile photo of designer and short bio (from wikipedia).
I suggest you to read more about these Designers and their work after you finish this project, because they are real titans of Design industry.
HTML
First thing to do, as always, is to setup the HTML structure for our project. Imagine HTML like a skeleton and CSS like muscles, skin etc. Our accordion menu will be constructed from unordered list with, let’s say, three menu (list) items. This list will have class “outer-ul”. Inside every of these list item will be nested another unordered list with class “inner-ul”. Inside list will contain <img> and <p> tags.
Switching mechanism will be created from radio buttons and labels. Names of Designers will be wrapped by <label> tag. Radio buttons will be placed before labels and inner list will be after labels. Labels will have “for” attribute with values “check1” for first menu item (bio), “check2” for second and “check3” for third. Radio buttons will share “name” attribute with value “check” to connect them, so only one of them can be selected (one bio visible at the time). Every radio will also have its own “id” attribute with value “check1” (1st radio), “check2” (2nd radio) and “check3” (3rd radio). This way, by “for” and “id” attributes, we will connect labels to individual radio buttons. In order to keep one bio visible on load, we will add attribute “checked” to the first bio.
In the bottom of the post will be whole code and also to live preview on Codepen.
Basic HTML structure without text will look like this…
HTML:
<ul class="outer-ul"> <li> <input type="radio" name="check" id="check1" checked /> <label for="check1"></label> <ul class="inner-ul"> <li> <img src="" alt="" /> <p></p> <p></p> </li> </ul> </li> <li> <input type="radio" name="check" id="check2" /> <label for="check2"></label> <ul class="inner-ul"> <li> <img src="" alt="" /> <p></p> <p></p> <p></p> </li> </ul> </li> <li> <input type="radio" name="check" id="check3" /> <label for="check3"></label> <ul class="inner-ul"> <li> <img src="" alt="" /> <p></p> <p></p> </li> </ul> </li> </ul>
Now, let’s populate our first bio. First Designer will be Massimo Vignelli. Text for bio is from wikipedia and profile image from Vignelli Center. Label tags will contain Massimo’s name. Inside inner list will be img tag (don’t forget alt tag) followed by two paragraphs of text.
HTML:
<ul class="outer-ul"> <li> <input type="radio" name="check" id="check1" checked /> <label for="check1">Massimo Vignelli</label> <ul class="inner-ul"> <li> <img src="http://vignellicenter.rit.edu/wp-content/uploads/2011/10/Massimo.jpg" alt="Massimo Vignelli profile photo" /> <p>Massimo Vignelli (January 10, 1931 – May 27, 2014) was an Italian designer who worked in a number of areas ranging from package design through houseware design and furniture design to public signage and showroom design. He was the co-founder of Vignelli Associates, with his wife, Lella. His ethos was, "If you can design one thing, you can design everything," and this was reflected in the broad range of his work.</p> <p>Vignelli worked firmly within the Modernist tradition, and focused on simplicity through the use of basic geometric forms in all his work.</p> </li> </ul> </li>
Second bio will belong to Saul Bass. Structure will be the same as was in case of Massimo Vignelli, except there will be three paragraphs of text.
HTML:
<li> <input type="radio" name="check" id="check2" /> <label for="check2">Saul Bass</label> <ul class="inner-ul"> <li> <img src="http://1.bp.blogspot.com/-Po5qv2hKl6U/TcXSNtVfPEI/AAAAAAAABRQ/uZgxjZxzc5k/s1600/saul_bass.jpg" alt="Saul Bass profile photo" /> <p>Saul Bass (/sɔːl bæs/; May 8, 1920 – April 25, 1996) was an American graphic designer and Academy Award winning filmmaker, best known for his design of motion picture title sequences, film posters, and corporate logos.</p> <p>During his 40-year career Bass worked for some of Hollywood's most prominent filmmakers, including Alfred Hitchcock, Otto Preminger, Billy Wilder, Stanley Kubrick and Martin Scorsese. Among his most famous title sequences are the animated paper cut-out of a heroin addict's arm for Preminger's The Man with the Golden Arm, the credits racing up and down what eventually becomes a high-angle shot of a skyscraper in Hitchcock's North by Northwest, and the disjointed text that races together and apart in Psycho.</p> <p>Bass designed some of the most iconic corporate logos in North America, including the Bell System logo in 1969, as well as AT&T's globe logo in 1983 after the breakup of the Bell System. He also designed Continental Airlines' 1968 jet stream logo and United Airlines' 1974 tulip logo which became some of the most recognized airline industry logos of the era.</p> </li> </ul> </li>
The last bio will be for … Paul Rand, the greatest logo Designer in the world. In his bio will be also profile image and two paragraphs of text.
HTML:
<li> <input type="radio" name="check" id="check3" /> <label for="check3">Paul Rand</label> <ul class="inner-ul"> <li> <img src="http://upload.wikimedia.org/wikipedia/en/3/3d/Paul-Rand.jpg" alt="Paul Rand profile photo" /> <p>Paul Rand (August 15, 1914 – November 26, 1996) was an American art director and graphic designer, best known for his corporate logo designs, including the logos for IBM, UPS, Enron, Morningstar, Inc., Westinghouse, ABC, and Steve Jobs's NeXT. He was one of the first American commercial artists to embrace and practice the Swiss Style of graphic design.</p> <p>Rand was educated at the Pratt Institute (1929–1932), Parsons The New School for Design (1932–33), and the Art Students League (1933–?1) Yale University in New Haven, Connecticut. Rand was inducted into the New York Art Directors Club Hall of Fame in 1972.</p> </li> </ul> </li>
This is everything we need for our HTML document. Next part is CSS.
CSS
First thing we will do, is to set font-size on html element to 16 pixels to create stable measure for later use of ems (1em = 16px) and font-family to Georgia (beautiful serif typeface) with serif as fallback.
CSS:
/*Typography*/
html {font: 16px Georgia, serif}
Now we will reset padding and margin for html, body and lists and set them to 0. Let’s also remove the dots before the list items by setting list-style-type to none.
CSS:
/*Base*/
html,
body,
ul {
margin: 0;
padding: 0;
}
/*Layout*/
ul {list-style-type: none;}
Styling of outer list will include setting its position to relative, so we can later set inner lists have absolute position (more about positioning here). To center the list and move it a bit from top of the page we will set margin to “1em auto”. 1em will apply to “top” and “bottom” and “auto” to “left” and right margins. Width of list will be … 50em (800 pixels), height will be 12.5em (200 pixels).
CSS:
.outer-ul {
position: relative;
margin: 1em auto;
width: 50em; /*800px*/
height: 12.5em; /*200px*/
}
List items right inside outer list fill be floated on left – to put them on one line next to each other – and their width will be 33.3% (100% divided by 3 menu items).
CSS:
.outer-ul > li {
float: left;
width: 33%;
}
Let’s move to inner lists – the bios. Their position will be “absolute” and left set to 0 to stack them on each other. First part of the magic is to set z-index to 0. This way, through z-index we will control which bio will be visible. Width and height will be set to 100% (100% of their parent element – outer list). We will also set a background color to show only the text of active bio and hide the rest. To keep it simple let’s set it to #fff (white). Feel free to style it by your own taste. To avoid showing inappropriate text (some bios are longer) we have to set overflow to auto. Next part of magic … Set opacity to 0 and set transition with value of “opacity” and timing of .75 seconds.
CSS:
/*Inner lists*/
.inner-ul {
position: absolute;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background: #fff;
overflow: auto;
opacity: 0;
transition: opacity .75s;
}
Images inside bios should have a consistent width and some space between them and text. To achieve this, we will set margin-left to .25 ems and width to 100 pixels. Let’s also set float to “left” so text will be placed next to them. For text let’s just set “top” and “bottom” margin to .5 em to create some white space between individual paragraphs.
CSS:
.inner-ul img {
float: left;
margin-right: .25em;
width: 100px;
}
.inner-ul p {
margin: .5em 0;
}
To hide radio buttons we will set display property to “none”.
CSS:
input {display: none;}
Now let’s create the switching mechanism. First, we will change the color of label to shade of red (#ad0000) when selected. This will be achieved by selecting input on checked state followed with “+” selector (selects element right after it).
CSS:
input:checked + label {color: #ad0000;}
Switching will be handled by, again, selecting input on “checked” state followed by “~” (selects every <ul> preceded by a <input>). In this rule we will set the z-index to 3 and opacity to 1.
CSS:
input:checked ~ ul {
z-index: 3;
opacity: 1;
}
And that’s it! Thanks to transition set to opacity we have nice fading effect for switching. If you want, show your own examples design by writing comment with links to Codepen.
Final HTML:
<ul class="outer-ul"> <li> <input type="radio" name="check" id="check1" checked /> <label for="check1">Massimo Vignelli</label> <ul class="inner-ul"> <li> <img src="http://vignellicenter.rit.edu/wp-content/uploads/2011/10/Massimo.jpg" alt="Massimo Vignelli profile photo" /> <p>Massimo Vignelli (January 10, 1931 – May 27, 2014) was an Italian designer who worked in a number of areas ranging from package design through houseware design and furniture design to public signage and showroom design. He was the co-founder of Vignelli Associates, with his wife, Lella. His ethos was, "If you can design one thing, you can design everything," and this was reflected in the broad range of his work.</p> <p>Vignelli worked firmly within the Modernist tradition, and focused on simplicity through the use of basic geometric forms in all his work.</p> </li> </ul> </li> <li> <input type="radio" name="check" id="check2" /> <label for="check2">Saul Bass</label> <ul class="inner-ul"> <li> <img src="http://1.bp.blogspot.com/-Po5qv2hKl6U/TcXSNtVfPEI/AAAAAAAABRQ/uZgxjZxzc5k/s1600/saul_bass.jpg" alt="Saul Bass profile photo" /> <p>Saul Bass (/sɔːl bæs/; May 8, 1920 – April 25, 1996) was an American graphic designer and Academy Award winning filmmaker, best known for his design of motion picture title sequences, film posters, and corporate logos.</p> <p>During his 40-year career Bass worked for some of Hollywood's most prominent filmmakers, including Alfred Hitchcock, Otto Preminger, Billy Wilder, Stanley Kubrick and Martin Scorsese. Among his most famous title sequences are the animated paper cut-out of a heroin addict's arm for Preminger's The Man with the Golden Arm, the credits racing up and down what eventually becomes a high-angle shot of a skyscraper in Hitchcock's North by Northwest, and the disjointed text that races together and apart in Psycho.</p> <p>Bass designed some of the most iconic corporate logos in North America, including the Bell System logo in 1969, as well as AT&T's globe logo in 1983 after the breakup of the Bell System. He also designed Continental Airlines' 1968 jet stream logo and United Airlines' 1974 tulip logo which became some of the most recognized airline industry logos of the era.</p> </li> </ul> </li> <li> <input type="radio" name="check" id="check3" /> <label for="check3">Paul Rand</label> <ul class="inner-ul"> <li> <img src="http://upload.wikimedia.org/wikipedia/en/3/3d/Paul-Rand.jpg" alt="Paul Rand profile photo" /> <p>Paul Rand (August 15, 1914 – November 26, 1996) was an American art director and graphic designer, best known for his corporate logo designs, including the logos for IBM, UPS, Enron, Morningstar, Inc., Westinghouse, ABC, and Steve Jobs's NeXT. He was one of the first American commercial artists to embrace and practice the Swiss Style of graphic design.</p> <p>Rand was educated at the Pratt Institute (1929–1932), Parsons The New School for Design (1932–33), and the Art Students League (1933–?1) Yale University in New Haven, Connecticut. Rand was inducted into the New York Art Directors Club Hall of Fame in 1972.</p> </li> </ul> </li> </ul>
Final CSS:
/*Typography*/
html {font: 16px Georgia, serif;}
/*Base*/
html,
body,
ul {
margin: 0;
padding: 0;
}
/*Layout*/
ul {list-style-type: none;}
/*Outer list*/
.outer-ul {
position: relative;
margin: 1em auto;
width: 50em;/*800px*/
height: 12.5em; /*200px*/
}
.outer-ul > li {
float: left;
width: 33.3%;
}
/*Inner lists*/
.inner-ul {
position: absolute;
left: 0;
z-index: 0;
width: 100%;
height: 100%;
background: #fff;
overflow: auto;
opacity: 0;
transition: opacity .75s;
}
.inner-ul img {
float: left;
margin-right: .25em;
width: 100px;
}
.inner-ul p {
margin: .5em 0;
}
input {display: none;}
input:checked + label {color: #ad0000;}
input:checked ~ ul {
z-index: 3;
opacity: 1;
}
Codepen:
https://codepen.io/d3v3r0/pen/osjuG
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
Code on Codepen was updated – I added some visual styling.
There is an issue with bottom bottom ou outer list. To fix it add following rule into .outer-ul selector.
overflow: hidden;