HTML
We'll start off with the basic structure of HTML containing the head section which includes the page title, stylesheet link & body tags.
Wrapper & Menu
Next inside the body tags create a main wrapper div tag to contain & center all of the content. In the wrapper tags, create an unordered list with a class name and create each list item with its own id. By giving each list item it's own id, we'll be using the :target selector which will allow us to style and open the accordion.
You need to make each list id different (eg. one, two) for the target selector to work, this will make the sub menus visible.
Sub Menus
For the sub menus, add a second unordered list with a own class name inside each list item.
CSS Styles
Now for the css, first I've written out some basics for the body & wrapper. I've made the wrapper centered and made the width 250px, because the wrapper will be containing the menu the width will determine the size of your menu.
As a first step to the accordion menu, you add reset style to the menu. This will clear the margins, paddings, list styles, borders & outline.
Now it's time to style the menu links, this includes the CSS3 Gradient style, font styles, shadows along with some style basics.
Next up you have the styles for the sub-menu's, this include background colours, shadows and other basics to help make the sub-menu look clean.
To complete the accordion menu, you finish the stylesheet with the code below. To make the sub-menu hide, you make the height 0 and an hidden overflow for the first style. The transition styles tell the accordion sub-menus to drop out when clicked on. Lastly I've made the height 98px because I have the same amount of sub links for each menu. If you plan to have different amount of sub-links for each menu, you'll need to add a different height for each sub-menu depending on how many links you have.
We'll start off with the basic structure of HTML containing the head section which includes the page title, stylesheet link & body tags.
Wrapper & Menu
Next inside the body tags create a main wrapper div tag to contain & center all of the content. In the wrapper tags, create an unordered list with a class name and create each list item with its own id. By giving each list item it's own id, we'll be using the :target selector which will allow us to style and open the accordion.
You need to make each list id different (eg. one, two) for the target selector to work, this will make the sub menus visible.
Sub Menus
For the sub menus, add a second unordered list with a own class name inside each list item.
CSS Styles
Now for the css, first I've written out some basics for the body & wrapper. I've made the wrapper centered and made the width 250px, because the wrapper will be containing the menu the width will determine the size of your menu.
As a first step to the accordion menu, you add reset style to the menu. This will clear the margins, paddings, list styles, borders & outline.
Now it's time to style the menu links, this includes the CSS3 Gradient style, font styles, shadows along with some style basics.
Next up you have the styles for the sub-menu's, this include background colours, shadows and other basics to help make the sub-menu look clean.
To complete the accordion menu, you finish the stylesheet with the code below. To make the sub-menu hide, you make the height 0 and an hidden overflow for the first style. The transition styles tell the accordion sub-menus to drop out when clicked on. Lastly I've made the height 98px because I have the same amount of sub links for each menu. If you plan to have different amount of sub-links for each menu, you'll need to add a different height for each sub-menu depending on how many links you have.
No comments:
Post a Comment