Two CSS vertical menu with show/hide effects

CSS menu and "Web 2.0" transition effects are topics very popular on my site and in general I receive a lot of code requests about these arguments.

So I wrote this simple tutorial with two vertical menu examples with show/hide menu effect. First example uses a simple JavaScript code. Second example uses mootools to show/hide the menu with a nice vertical slide-in/slide-out effect.

Download the source code (it includes mootools framework) and take a look at the live preview to see how they woork.

Download this tutorial Live preview

1. Menu with simple show/hide effect
Step 1.1: HTML Code
This is the basic example with a simple show/hide effect which you can implement just with some lines of JavaScript code (see next step). Our menu is a <ul> list wih a button (link) which calls a simple javascript function showElement() in the next step. HTML code is the following and you can customize it how you prefer simply changing the CSS code in the source file:

<a href="#" class="button" onclick="javascript:showElement('v-menu')">
<span>Click Here</span>
</a>
<ul id="v-menu" class="v-menu" style="display:none;">

<li><a href="p1.html">Technology</a></li>
<li><a href="p2.html">Design</a></li>
<li><a href="p3.html">Css Gallery</a></li>
<li><a href="p4.html">Entertainment</a></li>
<li><a href="p5.html">Programming</a></li>

</ul>

Remember to add the property "display:none" in the ul element to hide the menu when an user load the page (it will appear only when an user clicks on the button).

1. Menu with simple show/hide effect
Step 1.2: JavaScript function
Now, in the head tag of the page, add this simple script to show/hide a generic HTML element using CSS display property:

<script type="text/javascript">
function showElement(layer){
var myLayer = document.getElementById(layer);
if(myLayer.style.display=="none"){
myLayer.style.display="block";
myLayer.backgroundPosition="top";
} else {
myLayer.style.display="none";
}
}
</script>

showElement() function take in input the ID of the HTML element you want to show/hide. When an user clicks the button and CSS display property is set to "none" (menu hidden) this script will set the property with a new value "block" (menu visible).


2. Menu with Mootools toggle effect
Step 2.1: HTML Code
This second example adds a nice vertical slide-in/slide out effect to our menu using Mootools toggle effect. HTML code is not so different from the previous example. You have:

<a href="#" class="button" id="toggle"><span>Click Here</span>
</a>
<ul id="v-menu" class="v-menu">

<li><a href="p1.html">Technology</a></li>
<li><a href="p2.html">Design</a></li>
<li><a href="p3.html">Css Gallery</a></li>
<li><a href="p4.html">Entertainment</a></li>
<li><a href="p5.html">Programming</a></li>

</ul>

... You have only to add an ID to the button which show/hide your menu. It's not necessary to add the property "display:none" I used in the previous example in <ul> to hide the menu when an user loads the page the first time. You can do it using mootools hide() function (see the next step).


2. Menu with Mootools toggle effect
Step 2.2: JavaScript/Mootools code
Now, first of all, add a link to mootools framework in the tag of your page using this line of code:

<script type="text/javascript" src="mootools.svn.js"></script>

... ..and the following script immediately below the previous code:

<script type="text/javascript">
window.addEvent('domready', function(){
var myMenu= new Fx.Slide('v-menu2');
myMenu.hide();
$('toggle').addEvent('click', function(e){
e = new Event(e);
myMenu.toggle();
e.stop();
});
});
</script>

In this way when an user clicks on the button, your menu will appear/disapper with a nice vertical slide-in, slide-out effect. myMenu.hide(); funcion hides the menu when the page is loaded.


Customize your menu changing CSS code
You can change the look of my menu simply changing some lines of CSS code:

Download the source code and take a look at the live preview to see how they woork.

Download this tutorial Live preview

Read More

One shot, one kill: how to become popular with (almost) each post you write on your blog

Do you need for traffic for your website? Take a look at these simple tips...

This post is dedicated to my readers that asked to me how I succeed in making "popular" a lot posts I published on Woork on delicious. There is a "simple" way to make popular your post and assure a costant high traffic on your site for a medium period conquering a place on delicious home page... and this is what you have to do.

Step 1: Write something interesting
...otherwise it's all useless.

Step 2: your link on delicious/popular page
If you want to conquer delicious home page with your new post, the first step is do appear your new post/link on del.icio.us/popular page:

How can you do it? It's not so difficult if you have a medium daily traffic and a god number of feeds subscribers. I noticed in average 10-12 votes on delicious (users who save your link to their bookmars) in 30 minutes are enough to do appear your link on delicious/popular page and - this is the good news - immediatly you'll receive a high number of new visits from this page.

The "bad" news is: if you want to remain for a long time on delicious/popular page page (and in this way have a possibility to conquer delicious home page) you have to mantain an increasing votes trend for your link. And how can you do it? The faster way is using social network to promote your new post.


Step 3: Publish it and promote it on social networks
In general I use this simple... let me say... "rule" which works very well: when I publish a post on Woork the first thing I do is add it to some general news sites (I use only digg, mixx, reddit) and other niche websites related to the topics about which I write on my blog (Dzone, Design Float and CSS Globe).

Combined effect in terms of visits from these websites produces in general the hoped result and the number of people who save your link on delicious will increase quickly. In this way after one / two hours your link on delicious will catch up 100 votes, enough to appears on delicious home page!

Read More

Blog Design Madness Round 2!

With big pleasure I won the first round of Blog Design Madness on vandelaydesign.com. I received a lots of votes (woork has been the most voted site in this contest!) and I want to say thanks to everyone who voted me.

Today started the second round and you can vote for woork at this link:
http://vandelaydesign.com/blog/competition/round-two/

Thanks!

Read More

Nice comments counter style for your blog post

Are you looking for an idea to restyle your comments counter on your blog?

This post illustrates how to design a nice comments counter for your blog post and obtain an elegant post header using just some lines of CSS code. This is the result:

You can download the source code and use it immediatly on your blog.

Download source code

Counter structure
The following picture explains how to design our comments counter:

We have a main DIV which includes a <span> element (with class attribute = "count") which displays the number of comments for the current post and, below it, the text "comments". I prepared this image to for the DIV background using Photoshop:


I'll apply this image to background attribute in the CSS definition.


HTML and CSS Code
This is our HTML code:

<div class="bubble">
<span class="count">... counter ...</span>
comments
</div>

...and this is the CSS code:

.bubble{

background:url(img/bubble.png) left top no-repeat;
color:#575553;
float:left;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
height:68px;
margin-right:20px;
padding-top:7px;
text-align:center;
width:70px;

}

.bubble .count{

font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
color:#CC6600;

}

It's all! Nothing simpler :)

Read More

Vote Woork on Vandelaydesign.com

Guys, Woork partecipates to "Blog Design Madness" on Vandelaydesign.com. Please vote for me at the following link!

http://vandelaydesign.com/blog/competition/round-one-2/

Thanks! :))

Read More

Using CSS and Mootools to simulate Flash horizontal navigation effect

Some year ago I was a big Macromedia/Adobe Flash fan. Let me say... at that time, if you used Flash for your websites you was really cool and ok... I admit it, I liked the simplicity to place everything where I wanted and all fantastic animation effects I could obtain using Actionscript. But times change and I had a new "conversion" from FLASH to HTML when I discovered the CSS beauty. In particular using Flash I loved this kind of layout/effect: follow mouse sliding content.

Yesterday I asked to me how could obtain the same effect using CSS and HTML... So, I found an interesting solution at my question which I want to share with you. This tutorial explains how to use Mootools and pure CSS / HTML code to simulate a Flash (follow mouse) horizontal navigation effect.

You can download the source code (ready to use in your web projects) and see how this tutorial works using the following links:

Download this tutorial Live Preview


A little introduction
The following image explains the structure of this tutorial. You have a DIV layer (#container) which is the "visible mask" for all elements contained into the DIV .slide. All HTML elements outside the "borders" of the DIV #container are hidden (in this case section 4 and section 5). Section 1, Section 2... Section 5 are DIV layers with some HTML content you can customize how you prefer:

When you move your mouse to the right of the div #container, the DIV #slider with its content will move itself to the right. In this way section 1 and section 2 will move beyond the borders of the visible mask (#container) and they will be hidden:

HTML code
HTML code is very simple. First add a link to mootools framework in the <head> tag of your page using this line of code:

<script type="text/javascript" src="mootools.svn.js"></script>

...and the following script immediately below the previous code:

<script type="text/javascript">
window.addEvent('domready', function(){
var scroll = new Scroller('container', {area: 100, velocity: 1});
$('container').addEvent('mouseover', scroll.start.bind(scroll));
$('container').addEvent('mouseout', scroll.stop.bind(scroll));
});
</script>

Now, add this code in the <body> tag:

<div id="container">

<div class="slider">
... add some HML sections here...
</div>

</div>

...and you can add some sections simply adding some DIV layers into the DIV #slider:

<div id="container">

<div class="slider">

<div class="section">section 1 content</div>
<div class="section">section 2 content</div>
<div class="section">section 3 content</div>
<div class="section">section 4 content</div>
<div class="section">section 5 content</div>

</div>

</div>

Ok... now the only thing you have to do is free your creativity to design your sections using CSS and images.

CSS code
CSS code for the main structure is the following (take a mind you can customize this code how you prefer, but the only attributes you have not to change are overwlow attributes of the ID #container):

#container{

width: 780px;
height: 440px;
border: 8px solid #FFF;
overflow: auto;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;

}

.slider{

width: 2000px;
height: 400px;
padding: 20px;
background: #CCCCCC;

}

.section{

margin:0;
width:220px;
float:left;
margin-right:50px;

}

For a perfect result, the height attribute of #container must be equal to the sum of height + padding of the class .slider. The width attribute of the class .slider have to be a value greater than #container width.

You can customize the .section class changing the width, the background color and all other parameters you want.

It's all! Download the source code and try it!

Download this tutorial Live Preview

Read More

CSS Message Box collection

Message boxes are useful elements to display status messages after or during a specific user request.

Some days ago I wrote this post about how to implement a nice Ajax chains of effects (fade in, delay, fade out) for a common message box using mootools. Today I want to share with you a collection of some simple CSS styles you can apply to your message boxes (clean, solid, iconized, alternated rounded borders, tooltip).

I added also a link to download a beautiful icon pack to use in your projects to design custom message box or other graphic elements.

Download message box collection source code


Clean message box
I love clean and simple design and in general this is my preferred message box style: a border (1px) and a light background color:

HTML code is very simple:

<div class="clean-gray">Clean message box</div>

...a DIV layer with with some text within. And CSS code is something like this:

.clean-gray{

border:solid 1px #DEDEDE;
background:#EFEFEF;
color:#222222;
padding:4px;
text-align:center;

}

I suggest you to use "pastel" color for the background color and a darker color for the text.


Iconized message box
This is another box style I like. A simple box with an icon in background which describe visually the "event" it represents (ok, error, alert...):

HTML code is the same you saw in the previous example:

<div class="clean-gray">Clean message box</div>

...and the related CSS code is:

.icon-heart{

border:solid 1px #DEDEDE;
background:#FFFFCC url(img/icon-heart.png) 8px 6px no-repeat;
color:#222222;
padding:4px;
text-align:center;

}

If you are looking for nice icons I suggest to download this beautiful icon pack (Sweetie Pack). This is a preview of the content:

Download Sweetie Icon Pack 1 Sweetie website

You can use it to design your iconized message box or, for example, CSS buttons and other graphic elements for your web projects.


Solid message box
Nothing simpler: a message box with no borders and with text color in contrast with the background color:

HTML code is:

<div class="solid-green">Solid message box green</div>

...and CSS code is:

.solid-green{

background:#008000;
color:#FFFFFF;
font-weight:bold;
padding:4px;
text-align:center;

}

...choose the background color you prefer!


Alternated rounded borders message box
This is anoter nice solution with alternated rounded borders (top-left, bottom-right). The box adapts automatically the rounded borders position with its width and height:

HTML code is the following:

<div class="round-a-gray"><div>Alternated rounded borders message box</div></div>

...a DIV layer inside the main DIV layer with "round-a-gray" class. CSS code is:

.round-a-gray{

background:#444444 url(img/round_gray-left.png) left top no-repeat;
color:#FFFFFF;
text-align:center;

}
.round-a-gray div{

background:url(img/round_gray-right.png) right bottom no-repeat;
padding:4px;

}

Solid tooltip message box
This is a classic. A tooltip message box:

HTML is the following:

<div class="tooltips-gray">Solid message box<div></div></div>

...and CSS code is:

.tooltips-gray{

background:#444444;
color:#FFFFFF;
text-align:center;
padding-top:4px;

}
.tooltips-gray div{

background:url(img/tips_gray.png) left bottom no-repeat;
padding-top:4px;
height:18px;

}

You can yse the image you prefer to simulate the "arrow" for your tooltip.

Download the source code (HTML+CSS)

Download message box collection source code

Read More