PDA

View Full Version : Pure CSS Hide and Display Content



nijim86
Mar 4th, 2015, 11:14 PM
Here we are going to learn how to create this pure CSS hide and display method step by step in order to give you the reader a better idea of the whole process in creating your very own content hide and display areas. Let’s start off with our standard XHTML document.
Let’s start by building our html structure first. Start out with a blank html document like this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
Next lets add a div box that will act as our navigation bar for each hide and display item.
<body>
<div id="contentBox">
</div>
</body>
We give our div block an id of “contentBox” so we man reference it in our CSS later. Now lets add our style tags to our header in order to give us room to create our CSS.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
</style>
</head>
Ok now that we have our style tags let add our first rule for our div box.
#contentBox {
width:500px;
height:20px;
}
Here we have givin our div box “#contentBox” rule a width and a height in order to contain our hide and display items better.
Next let’s go back to our html structure and add an unordered list to our div box.
<div id="contentBox">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
Ok before we begin to add content to our un-ordered list let go back up to our CSS and create a few more rules. Add the following rules to your style tags.
#contentBox ul {
margin:0px;
padding:0px;
position:relative;
width:100%;
}

#contentBox ul li {
display:inline;
float:left;
background-color:#999;
margin-right:10px;
}
Ok what we have done here is stated two new rules both are pointing to first our div box “#contentBox” then to the first un-ordered list it finds “ul”. The second rule is performing the same as the first but it go one step deeper and points to our first un-ordered list items “li”.
Our first rule tells our un-ordered list to have a padding and margin of “0px” to offset the default margin and padding’s that come with an un-ordered list. Next we give it a position of relative in order to contain any elements that have a position of absolute within our unordered list. Our last rule gives our unordered list a width of a “100%”.
Our second rule sets all list items to display inline and have a float of left to align them self’s in horizontal fashion. We give our list items a background color of “#999” but this may be a color of your own choice. Margin right is set to “10px” to give our list items a 10px offset from each other and space things out a bit.
Ok now let go back to our html structure and add some content to our hide and display items. First we must add our title for each hide and display item so within each list item “li” add the following.
<div class="titleCell">
<strong>Home</strong>
</div>
Ok let’s talk about these elements for a second shall we. We are nesting our list item buttons to give our list item buttons a layered hierarchy over our displayed content area with a position absolute style. Basically we are doing this to give visual relevancy to our list items and their content areas, by matching up background colors and breaking are hovered list items bottom border. So once you have your html structure looking like the following go back up to our style tags so we can write two more style rules.
<div id="contentBox">
<ul>
<li>
<div class="titleCell">
<strong>Home</strong>
</div>
</li>

<li>
<div class="titleCell">
<strong>About</strong>
</div>
</li>

<li>
<div class="titleCell">
<strong>Contact</strong>
</div>
</li>

<li>
<div class="titleCell">
<strong>FAQ</strong>
</div>
</li>
</ul>
</div>
Ok in our style tags we are going to create two more rules. One rule if for our new div boxes that have a CSS class reference and the second is for any strong tag related to this CSS class. Add the following two rules to our style tags.
.titleCell {
width:75px;
height:20px;
position:relative; z-index:1000;
margin:0px; padding:0px;
cursor:pointer;
}

.titleCell strong {
font-size:14px;
position:absolute; z-index:1000;
width:73px; height:18px;
text-align:center;
border:#000 solid; border-width:1px;
}
Ok our first rule “.titleCell” is setting width of 75px to give each list item title enough room to fit its name. This width style may be altered to whatever you desire your list item title widths to be except for a width of 100%. Next we set its height to be 20px to match our div box “contentBox” height. The height rule may not be set to 100% and must correspond with our “contentBox” height. Next we set a position of relative and a z-index of 1000 to again give a stopping point for any nested elements who carry a position of absolute from breaking out of our design flow. The z-index is a way to declare a layered rendering hierarchy over other elements who have a lower z-index number than 1000. Next we set our “.titleCell” a cursor style of pointer to change our mouse to a pointer cursor when being hovered over.
Ok our second rule “.titleCell strong” points to any element in our “.titleCell” that’s a strong element. Here we are giving our strong elements a font size of 14px, position of absolute and z-index of 1000. We set the font size for cross browser compatibility and the position of absolute and z-index of 1000 in order break our strong tags out of our design flow and over any displayed content box. Next we give our strong tags a border that’s #000(black) and border width that’s 1px. Because we now have an extra 1px on both sides of our strong tags we set our strong tags width to be that of 2 pixels smaller than its parent “.titleCell” equaling a width of 73px. We again set our strong tags height to be also 2 pixels shorter than its parent “.titleCell” height equaling a height of “18px”. Last we set a text align of center to center our list item titles within our strong tags.
Ok let’s go back up to our hide and display structure and add our content areas to our un-ordered list. In order to make our content areas for each hide and display list item we have to build a new un-ordered list that we will refer to from now on as our “sub unordered list”. Here is what one would look like.
<ul>
<li>
<!-- content here -- >
</li>
</ul>
Ok we place each of our sub un-ordered lists directly in our first unordered list items “li”. Make your entire hide and display structure look like the following.
<div id="contentBox">
<ul>
<li>
<div class="titleCell">
<strong>Home</strong>
</div>
<ul>
<li>
<!-- content here -->
</li>
</ul>
</li>

<li>
<div class="titleCell">
<strong>About</strong>
</div>
<ul>
<li>
<!-- content here -->
</li>
</ul>
</li>

<li>
<div class="titleCell">
<strong>Contact</strong>
</div>
<ul>
<li>
<!-- content here -->
</li>
</ul>
</li>

<li>
<div class="titleCell">
<strong>FAQ</strong>
</div>
<ul>
<li>
<!-- content here -->
</li>
</ul>
</li>
</ul>
</div>
Ok great all that’s left to do is to build our sub un-ordered list styles and visual structure by going back up to our style tags and adding the following CSS rules.
#contentBox ul ul {
position:absolute; left:0px;
display:none;
z-index:100;
}

#contentBox ul ul li {
border:#000 solid;
border-width:1px;
width:500px;
background-color:#FFF;
padding:10px;
}
Ok our first rule is again pointing to our main div box “contentBox” then to our first un-ordered list and then to any sub or rather nested second level unordered list. This sub unordered list receives a position of absolute to break it out of our structured flow and into its parent who was set to a position of relative. Next we set its left style to be 0px in order to assure all content areas are position completely to left when being displayed. Next we set a display of none to always hide our content areas until being told other wise and we also set its z-index to be a 100 or any number lower than 1000.
Our next rule points to our sub un-ordered list just as our first rule but then points to all listed items. Here we set a width to be that of 500px and match our main div box “contentBox” width to completely fill up our desired hide and display width amount. The width style here may not be set to 100% and must match our main div box “contentBox” at all times. Next we give a border of #000 (black) and border width of 1px to give a 1px border completely around our content areas. We also set the background color to #fff (white) and padding of 10px.
Ok we have two more rules we are going to add to our style tags and these rules make up the hover states for each hide and display list item and its content areas. Add the follow two rules to your style tags.
#contentBox ul li:hover ul {
display:block; top:-1px; !important; top:19px;
}

#contentBox ul li:hover .titleCell strong {
border-left:#000 solid;
border-right:#000 solid;
border-top:#000 solid;
border-bottom:#fff solid;
border-width:1px;
background-color:#FFF;
}
Ok our first rule points to our main div box “contentBox” then our first un-ordered list and its list items. Then attached to the list item “li” is a CSS pseudo hover statement “:hover”. After our hover declaration we point to our sub un-ordered list. Here we are saying that whenever a list item from our first un-ordered list is hovered over then we want our sub unordered list to perform the following styles. Here we set our sub unordered list to be finally displayed with a display of block. Next we tell our sub level unordered list to have a top style of -1px to offset our 1px border. Next is a standard IE fix called “!important” and basically we are giving a special top style to all IE browsers that’s 19px or rather 1px less than our 20px height on our main div box “contentBox” due to our 1px border.
Our last rule is pointing to our main div box “contentBox” and then our first un-ordered list and its list items with a pseudo hover class. After the hover class we point to our list item titles “.titleCell” and their strong tags and begin to set styles. Here we are basically making sure our list item titles continue to keep their background color of #fff (white) when hovering over our content areas. We also set a top left and right border of #000(black) and a border bottom of #fff(white) but still keep the border width 1px as before to break our the bottom border from over our content areas.
for more information visit: Lesson EveryDay: Pure CSS Hide and Display Content (http://it-led.blogspot.com/2015/03/pure-css-hide-and-display-content.html)