Monday, 9 December 2013

CSS : Accordion Menu: CSS coding

CSS Accordion Menu: CSS coding

We will create a vertical Accordion Menu in this tutorial and in the next article we will show you how to convert it to a horizontal menu using the same HTML code we used in the last article.

For a simpler version of the CSS Accordion Menu please visit here.

CSS Accordion Menu: The CSS side

First we need to give our accordion a maximum height and a width. We don’t want the text in the <p> tags visible until the accordion has been hovered so we need to set our overflow to hidden. We will also get rid of the bullets from the list, the menu a background color and round off the corners off the menu to make it look a little softer.

So our beginning code should look something like this.

.accordion{
  width:600px;
  overflow:hidden;
  list-style:none;
  margin-bottom:10px;
  background:#ccc;

  -moz-border-radius:10px;
  -webkit-border-radius:10px;
  -o-border-radius:10px;
  border-radius:10px;
}

Next we need to set up the accordion list items CSS for their natural state.

.accordion li {
   height:20%;
   width:100%;
   -moz-transition:height 0.3s ease-out;
   -webkit-transition:height 0.3s ease-out;
   -o-transition:height 0.3s ease-out;
   transition:height 0.3s ease-out;
   overflow: hidden;
}

In this example we have 5 items in our menu so we divided it up into 5 equal parts, thus the 20% for our height. We want our sections to come right across so naturally we set that to 100%. Overflow was set to hidden as we do not want the text appear till we hover over it. The transition lines relate to the smooth sliding effect we are giving our accordion. This property was introduced with CCS3. In this case we have set the height to ease out over .3 of a second when when ever it is increasing or decreasing in height.

So that we retain the nice rounded of shape to our menu we will apply the following code to the first and last list items using the first-of-type and last-of-type psuedo-classes.

.accordion li:first-of-type{
   -moz-border-radius:10px 10px 0 0;
   -webkit-border-radius:10px 10px 0 0;
   -o-border-radius:10px 10px 0 0;
   border-radius:10px 10px 0 0;
}
.accordion li:last-of-type{
   -moz-border-radius:0 0 10px 10px;
   -webkit-border-radius:0 0 10px 10px;
   -o-border-radius:0 0 10px 10px;
   border-radius:0 0 10px 10px;
}

By rounding off the top of the first item and the bottom of our last item we maintain the shape we wanted.

.accordion:hover li{
  height:10%;
  width:100%;
}
.accordion li:hover{
  height:60%;
  width:100%;
}

And our CSS for a vertical accordion menu is complete. Well the basic structure is. In some cases you may have to fiddle with the figures for the sizes to get it right for you depending on your typography etc but that is the back structure.

Other Topics

CSS : Background colour running to the screen bottom,CSS : Text-transform command,CSS : IE and width & height issues,CSS : Drop down menu,CSS : Accordion Menu: CSS coding,CSS : Zoom property,CSS : Relative zoom,CSS3 : target-new Property ,CSS : 3-d push button effect ,CSS : Document for handhelds ,CSS : Invisible text ,CSS : Disappearing text or images in IE? ,CSS : Image replacement technique,CSS : Box model hack alternative,CSS : Centre aligning a block element,CSS : Class selector,CSS : Sticky Footer Layout,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,CSS : Id Selector

CSS : Drop down menu

he first part of this tutorial is dedicated to the task of building a working CSS-only dropdown menu (also known as suckerfish menu), the second part will show you how you can pimp the whole thing with a few lines of jQuery.

The CSS-only menu is cross browser tested and from what I can tell works with all browsers except for IE6.
The Internet Explorer needs the addition of our jQuery function to work properly.

To create a CSS-only dropdown menu that works without Javascript (even in IE6), you need tons of extra markup and CSS, if you really need this for any reason check out Stu Nicholls CSSplay, he addresses this problem with heavy (ab)use of conditional comments =)

Now that you have a little bit of background information, lets create our own menu:

First of all we need the XHTML Structure of our soon-to-be terrific menu. We will use a nested list for this purpose, top level list id is “nav”:

<ul id="nav">
    <li><a href="#">1 HTML</a></li>
    <li><a href="#">2 CSS</a></li>
    <li><a href="#">3 Javascript</a>
        <ul>
            <li><a href="#">3.1 jQuery</a>
                <ul>
                    <li><a href="#">3.1.1 Download</a></li>
                    <li><a href="#">3.1.2 Tutorial</a></li>
                </ul>
            </li>
            <li><a href="#">3.2 Mootools</a></li>
            <li><a href="#">3.3 Prototype</a></li>
        </ul>
    </li>
</ul>

Thats it for the HTML part; without CSS styling our menu looks like this: Step 1

Now for the stylesheet part:

#nav, #nav ul{
     margin:0;
     padding:0;
     list-style-type:none;
     list-style-position:outside;
     position:relative;
     line-height:1.5em;
 }

This removes the indents browsers tend to make, as well as the bullets from #nav and all its child-ul elements. The “position:relative” is needed since we will arrange some of the contained elements with position:relative and absolute. This is necessary since relative and absolute positioned elements are positioned according to their containing blocks with a position attribute, other then static.

Line-height defines the height of each list item. You could set the height attribute for your list-items to define their height, but line-height will center the link text vertically without the need to play with margins and paddings.

 #nav a:link, #nav a:active, #nav a:visited{
    display:block;
    padding:0px 5px;
    border:1px solid #333;
    color:#fff;
    text-decoration:none;
    background-color:#333;
 }

#nav a:hover{
    background-color:#fff;
    color:#333;
}

This one is pretty straight forward:
it will style each hyper link in our menu a little bit. At this time the menu looks like this:Step 2

Now lets add some more styles:

#nav li{
    float:left;
    position:relative;
}

This will align our list elements horizontally.

#nav ul {
    position:absolute;
    width:12em;
    top:1.5em;
    display:none;
}

This will position the nested Lists right beyond the main menu and give them a width of 12em. The width attribute is needed so that the list items within display vertically again. The Top attribute should have the same value as the line-height attribute we defined for #nav.

#nav li ul a{
    width:12em;
    float:left;
}

This will set the width of the hyper links to 12 em (which in combination with the width of the UL set above results in a horizontally displayed sub menu, despite of the ongoing float:left)

#nav ul ul{
 top:auto;
 }

#nav li ul ul {
    left:12em;
    margin:0px 0 0 10px;
    }

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul{
    display:none;
    }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul{
    display:block;
    }

#nav ul ul and #nav li ul ul define where we display the sub menus.

The hover states define which items we want to show when hovering over an item (only the next sub level, not all of them)

After applying these styles we got this menu: Step3

If you are working with a browser other than IE6 you should have a basic dropdown menu now.

Gogo jQuery!

So lets spice up the menu a little bit. First of all here is the whole jQuery Code I used to create the effect:

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
  $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
  },function(){
  $(this).find('ul:first').css({visibility: "hidden"});
  });
}

 $(document).ready(function(){
 mainmenu();
});

Step by step description:

$(" #nav ul ").css({display: "none"}); // Opera Fix

This is a small fix for Opera, which doesn’t hide the menus fast enough, if you hover above them and so creates a flickering effect. $(” #nav ul “) is the jQuery way to select all unordered lists in #nav. Usage of this is similar to selecting CSS elements. The.css({display:”none”}) sets the display attribute for all Unordered lists to none.

$(" #nav li").hover(function(){ // here goes mouse over effect
                  },function(){ // here goes mouse out effect
                               });

This is the jQuery function for hovering. Really simple to use: first function lets you define what happens when you hover over a specific item( in our case a list item), second function is used for the mouse out event.

$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).show(400);

This function finds the first hidden unordered list within the currently hovered list item and shows it. The function “.show” works only under specific circumstances, this is why we set the display to none. The number between the braces defines the animation speed in milliseconds.

$(this).find('ul:first').css({visibility: "hidden"});

This is the mouse out event: we use visibility instead of display since the show function mentioned above, sets display to “block” at the end of the animation. This way if you would hover just a short moment over the item the item would not display for the ongoing animation and then pop out all of a sudden. Using visibility prevents this flickering.

 $(document).ready(function(){
 mainmenu();
});

This function will call our mainmenu() function as soon as the html document is ready.

Other Topics

CSS : IE and width & height issues

IE and width & height issues

IE has a rather strange way of doing things. It doesn't understand the min-width and min-height commands, but instead interprets width and height as min-width and min-height - go figure!
This can cause problems, because we may need boxes to be resizable should more text need to go in them or should the user resize text. If we only use the width and height commands on a box then non-IE browsers won't allow the box to resize. If we only use the min-width and min-height commands though then we can't control the width or height in IE!

This can be especially problematic when using background images. If you're using a background image that's 80px wide and 35px high, then you'll want to make sure that the default size for a box using this image is exactly 80 x 35px. However, if users resize the text then the box size will need to expand gracefully.
To resolve this problem, you can use the following code for a box with class="box":

.box
{
width: 80px;
height: 35px;
}

html>body  .box
{
width: auto;
height: auto;
min-width: 80px;
min-height:  35px;
}

All browsers will read through the first CSS rule but IE will ignore the second rule because it makes use of the child selector command. Non-IE browsers will read through the second one and will override the values from the first rule because this CSS rule is more specific, and CSS rules that are more specific always override those that are less specific.

Other Topics

CSS : Text-transform command

Text-transform command

One of the lesser known, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase and text-transform: capitalize. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word capitals.

This command is incredibly useful to help ensure consistency in style across an entire website, particularly if there a number of content editors. Say for example your style guide dictates that words in headings must always begin with capital letters. To ensure that this is always the case, use text-transform: capitalize. Even if site editors forget about the capitalisation, their mistake won't show up on the website.

It's also preferable to use text-transform: uppercase to capitalise words, as screen readers may pronounce shorter words in capital letters as acronyms. A great example of this is ‘CONTACT US’, which is pronounced as ‘contact U S’ by some screen readers.

CSS : Background colour running to the screen bottom

Background colour running to the screen bottom

One of the disadvantages of CSS is its inability to be controlled vertically, causing one particular problem which a table layout doesn't suffer from. Say you have a column running down the left side of the page, which contains site navigation. The page has a white background, but you want this left column to have a blue background. Simple, you assign it the appropriate CSS rule:

#navigation
{
background: blue;
width: 150px
}

Just one problem though: Because the navigation items don't continue all the way to the bottom of the screen, neither does the background colour. The blue background colour is being cut off half way down the page, ruining your great design. What can you do!?

Unfortunately one of the only solutions to this is to cheat, and assign the body a background image of exactly the same colour and width as the left column. You would use this CSS command:

body
{
background: url(blue-image.gif) 0 0 repeat-y
}

This image that you place in the background should be exactly 150px wide and the same blue colour as the background of the left column. The disadvantage of using this method is that you can't express the left column in terms of em, as if the user resizes text and the column expands, it's background colour won't.
Using this method the left column will have to be expressed in px if you want it to have a different background colour to the rest of the page.

Other Topics

Friday, 6 December 2013

CSS : Disappearing text or images in IE?

Disappearing text or images in IE?

IE has a very strange bug where text or background images sometimes disappears from sight. These items are still actually there, and if you highlight everything on screen or hit refresh they'll often re-appear. Kind of strange, huh?

This problem mostly occurs on background images and on text next to a floated element. To remedy the problem, simply insert position: relative into the CSS command for the disappearing element, and for some bizarre reason that'll usually fix the problem. If this doesn't work (it sometimes doesn't), assign a width to the offending element in the CSS and that should fix the problem.

Other Topics

CSS : Vertically aligning with CSS ,CSS : Positioning within a container ,CSS : Hiding text using text-indent ,CSS : The * HTML hack ,CSS : Minimum width for a page ,CSS : Same navigation code on every page ,CSS : 3-d push button effect ,CSS : Document for handhelds ,CSS : Invisible text ,CSS : Disappearing text or images in IE? ,CSS : Image replacement technique,CSS : Box model hack alternative,CSS : Centre aligning a block element,CSS : Class selector,CSS : Sticky Footer Layout,CSS::STYLING FORMS, mechanical Engineering, English books,Photoshop tutorials,Harry potter,Best 100 english books,Mechanical-old-question-paper,CSS : Id Selector

CSS : Invisible text

Invisible text

Sometime you may actually want to make text invisible. Invisible text can be especially useful for screen reader users, perhaps to assign a label to a form item or insert a heading ahead of a section. Don't want to change the visual appearance by inserting these? Make them invisible and no one using a visual browser knows that they're there.

You may also want to make text invisible if using a print or handheld CSS file, as some information may not need to be displayed on either of these mediums (see below for more on this).

To make text invisible you can use display: none - easy! This works fine for hiding text from handhelds (if CSS is supported) and printed web pages, but isn't so great for many screen readers. Screen readers are now becoming too clever for their own good, and some will actually ignore the any text that has the rule display: none assigned to it.

For screen readers users therefore, a new approach is needed: position: absolute; left: -9000px. This basically takes the text and positions it 9000px to the left of the left edge of the screen, essentially making it invisible.

Other Topics

CSS : Document for handhelds

CSS document for handhelds

A separate CSS document can be created for PDAs and mobile phones, and only activated when one of these devices is being used to access your site. More and more websites are creating separate CSS documents for printing, so web pages automatically become print-friendly when users choose to print them. You can also do the same for handheld devices.
The following command is used to call up the CSS document for handhelds:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

CSS commands in the handheld CSS file override any equivalent commands in the main CSS document. So, what commands should you place in this file?

Ideally, you want handheld web users to avoid having to scroll across. To test this, open up your website in a regular browser window and resize it to 150px in width. Then, open up your main CSS file and insert some new commands at the very bottom of the document. The commands you place here should adjust the layout of the website so that it doesn't require horizontal scrolling at a 150px width. Then, open up a new document, cut and paste these new commands over, and save it as handheldstyle.css (or whatever name you want to give it).

What your website offers to handheld web users should be quite different to what it offers on traditional web browsers, as the user experience is quite different. For further information, a book such as Handheld Usability is a great read.

Other Topics

CSS : 3-d push button effect

3-d push button effect

Back in the early days of the web, 3-d buttons that appeared to become pushed in when moused over were all the rage. At that time, this could only be achieved through images and JavaScript, but now with the advent of CSS we can go all retro and re-create this effect:

The main CSS commands you'll need are:

a {
display: block;
border: 1px solid;
border-color: #aaa #000  #000 #aaa;
width: 8em;
background:  #fc0;
}

a:hover
{
position: relative;
top: 1px;
left:  1px;
border-color: #000 #aaa #aaa #000;
}

Aside from these commands, you can insert any other commands to achieve the desired presentation effect - the only limit is your imagination!

Other Topics

CSS : Same navigation code on every page

Same navigation code on every page

Most websites highlight the navigation item of the user's location in the website, to help users orientate themselves. This is a fundamental requirement for basic usability, but can be a pain as you'll need to tweak the HTML code behind the navigation for each and every page. So can we have the best of both worlds? Is it possible to have the navigation highlighted on every page, without having to tweak the HTML code on each and every page? Of course it is...

First of all, you'll need to assign a class to each navigation item:

<ul>
<li><a href="#"  class="home">Home</a></li>
<li><a  href="#" class="about">About  us</a></li>
<li><a href="#"  class="contact">Contact  us</a></li>
</ul>

You'll then need to insert an id into the <body> tag. The id should be representative of where users are in the site and should change when users move to a different site section. When in ‘Home’ it should read

<body id="home">,

in ‘About Us’ it should be

<body id="about">

and in ‘Contact Us’

<body id="contact">.

Next, you create a new CSS rule:

#home .home, #about .about, #contact .contact
{
commands for  highlighted navigation go here
}

This basically creates a rule that only takes effect when class="home" is contained within id="home", and when class="about" is in id="about" and class="contact" is in id="contact". These situations will only occur when the user is in the appropriate site section, seamlessly creating our highlighted navigation item.

Other Topics

CSS : Minimum width for a page

Minimum width for a page

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.

Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this work in this browser. First, we'll insert a <div> under the <body> tag, as we can't assign a minimum width to the <body>:

<body>
<div id="container">

Next we create our CSS commands, so as to create a minimum width of 600px:

#container
{
min-width:  600px;
width:expression(document.body.clientWidth < 600? "600px": "auto"  );
}

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note though, this command will cause your CSS document to invalidate so you may prefer to insert it into the head of each HTML document to get round this.

You might also want to combine this minimum width with a maximum width:

#container
{
min-width: 600px;
max-width:  1200px;
width:expression(document.body.clientWidth < 600? "600px" :  document.body.clientWidth > 1200? "1200px" : "auto");
}

Other Topics

MECHANICAL,CSS,HTML

Monday, 9 December 2013