Rollover menu on click

In this post is an example of a rollover menu that appears on a click event. Timers are used to show the menu while the mouse is over the menu, and to hide the menu when you leave the menu. This can be very simple to modify from a click event to a mouseover/mouseenter event.

Demo

1. The HTML

<a href="#">Show menu</a>
<ul>
  <li>&raquo; <a href="#">First item</a></li>
  <li>&raquo; <a href="#">Second item</a></li>
  <li>&raquo; <a href="#">Third item</a></li>
</ul>

2. The CSS

Here is the entire CSS that I’ve used for the demo.

body { font-family: Arial; }
.menu a, .menu li {
  color: #9F1501;
  text-decoration: none;
}
.menu a:hover { text-decoration: underline; }
.menu {
  display: none; /* this is mandatory */
  background: #f0f0f0;
  padding: 10px;
  list-style: none;
  width: 150px;
  border-radius: 5px;
}

3. The jQuery

$(function() {
  $('.show-menu').click(function() {
    clearTimeout($(this).data('timeoutId'));
    $(".menu").show();
  }).mouseleave(function() {
    var timeoutId = setTimeout(function() {
      $(".menu").hide();
    }, 650);
    $(this).data('timeoutId', timeoutId);
  });
  $('.menu').mouseenter(function() {
    clearTimeout($(".show-menu").data('timeoutId'));
    $(".menu").show();
  }).mouseleave(function() {
    var timeoutId = setTimeout(function() {
      $(".menu").hide();
    }, 650);
    $(".show-menu").data('timeoutId', timeoutId);
  });
});

Center absolute positioned elements

Sometimes you need to center an absolute positioned element, but margin: 0 auto doesn’t work. In the following example I will show you a way to center that kind of elements.

Let’s say that the HTML looks like this:

<div class="outer">
  <div class="inner"></div>
</div>

..and the CSS looks like this (for now):

.outer {
  position: relative;
  width: 300px;
  height: 300px;
  background: blue;
  margin: 100px auto;
}
.inner {
  position: absolute;
  width: 100px;
  height: 100px;
  background: yellow;
}

For now, we have the following display on the browser (the yellow div is positioned absolute):

To center the yellow div we need the following code added:

.inner {
  position: absolute;
  width: 100px;
  height: 100px;
  background: yellow;
  /* this is the new code */
  left: 0;
  right: 0;
  margin: 0 auto;
}

Now, the yellow div will look like this:

Further more, if you want it vertically align, use this:

.inner {
  position: absolute;
  width: 100px;
  height: 100px;
  background: yellow;
  left: 0;
  right: 0;
  /* this is the new code */
  margin: auto;
  top: 0;
  bottom: 0;
}

The final code will display the following:

Shapes with CSS

The following shapes use only a single HTML element and some CSS. Some of the shapes can be use with content, but some of them like the triangles, trapezoid or the last special shapes can’t be used with content.

Demo

The CSS for the shapes is:

1. Square

#square {
  width: 100px;
  height: 100px;
  background: green;
}

2. Rectangle

#rectangle {
  width: 200px;
  height: 100px;
  background: green;
}

3. Circle

#circle {
  width: 100px;
  height: 100px;
  background: green;

  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

4. Oval

#oval {
  width: 200px;
  height: 100px;
  background: green;

  -moz-border-radius: 100px / 50px;
  -webkit-border-radius: 100px / 50px;
  border-radius: 100px / 50px;
}

5. Triangle

#triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid green;
}

6. Triangle Top Left

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 100px solid green;
  border-right: 100px solid transparent;
}

7. Trapeziod

#trapezoid {
  border-bottom: 100px solid green;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  height: 0;
  width: 100px;
}

8. Pacman

#pacman {
  width: 0px;
  height: 0px;
  border-right: 60px solid transparent;
  border-top: 60px solid green;
  border-left: 60px solid green;
  border-bottom: 60px solid green;
  border-top-left-radius: 60px;
  border-top-right-radius: 60px;
  border-bottom-left-radius: 60px;
  border-bottom-right-radius: 60px;
}

9. Talk Bubble

#talk-bubble {
  width: 120px;
  height: 80px;
  background: green;
  position: relative;

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

#talk-bubble:after {
  content:"";
  position: absolute;
  right: 100%;
  top: 26px;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-right: 26px solid green;
  border-bottom: 13px solid transparent;
}

10. Yin Yang

#yin-yang {
  width: 96px;
  height: 48px;
  background: #fff;
  border-color: black;
  border-style: solid;
  border-width: 2px 2px 50px 2px;
  position: relative;

  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

#yin-yang:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: black;
  border: 18px solid #fff;
  width: 12px;
  height: 12px;

  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

#yin-yang:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: #fff;
  border: 18px solid black;
  width: 12px;
  height: 12px;

  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

For more shapes made only with CSS visit css-tricks.com

jQuery MultiSelect Widget

This jQuery plugin turns an ordinary HTML select control into an drop down list of checkboxes with themeroller support.

How to use the widget:

First you have to include the following files:

– jQuery 1.4.2+

– jQuery UI 1.8 widget factory and effects

– the widget: jquery.multiselect.js

– the CSS file: jquery.multiselect.css

<link rel="stylesheet" href="jquery.multiselect.css"/>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.20.custom.min.js"></script>
<script type="text/javascript" src="jquery.multiselect.min.js"></script>

After that construct a standard multiple select box. It must have the multiple attribute

<select id="multiselect" multiple="multiple">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
  <option>Option 5</option>
</select>

Finally, you must initialize the widget:

$(document).ready(function(){
   $("#multiselect").multiselect();
});

Demo

For the documentation and to download the widget go here.

Stroll.js – list scroll effects

Stroll.js is a collection of CSS and CSS3 list scroll effects: grow, cards (CSS 3D), curl (CSS 3D), wave, flip (CSS 3D), fly (CSS 3D), simplified fly (CSS 3D), reverse fly (CSS 3D), skew, helix (CSS 3D), fan, tilt, papercut, zipper, fade, twirl (CSS 3D),

How to use:

First you need to include the jQuery library, the plugin and the style:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/stroll.min.js"></script>

The HTML markup is the following:

<div id="main">
    <ul>
	<li>One</li>
	<li>Two</li>
	<li>Three</li>
	<li>Four</li>
	<li>Five</li>
    </ul>
</div>

Don’t forget that the scroll effect is determined via the class that is set on the list. Then stroll.js needs to be told to monitor that list via the bind method:

stroll.bind( '#main ul' );

Demo

Download & Documentation