Programming Tutorials Browser Tutorials Articles Struts Tutorials Hibernate Tutorials

Search: 

  Tutorial: CSS CSS CSS Pop Up Menu Tutorial

This tutorial features a pop up menu written purely in CSS. The code uses XHTML lists which are then styled to produce the hover effects. No Javascript is used apart from IE browsers as they will not display the hover effect without it.

Tutorial Details:

The following tutorial features a pop up menu written purely in CSS, similar to the one on the BrokenBlade website. The code uses XHTML lists which are then styled to produce the hover effects. No Javascript is used apart from IE browsers as they will not display the hover effect without it. More on that later though, first off we'll begin by creating our menu in XHTML.

It looks a lot nicer and a lot more like a menu than a list. There are 4 "blocks" of code and so I'll describe each of them in turn. The first block removes the bullets by setting the list-style to none. The width of the menu is also set. The second and third blocks define the styles for the links. By setting display to block and giving it a width, the whole of the rectangle the menu item is in will be clickable, rather than just the text. The padding sets a bit of space around the text, and a background colour is set. The third sets colours for a hover style. The last block of code deals with the li element itself. A 1px border is set to the bottom to differentiate between the menu items. They are also floated left in order to fix a bug in IE that includes a gap under each li. Finally position is set to relative, which enables the pop up menu to be positioned relative to it. Here's what it looks like now .
Now comes the fun part. We'll start off with the "Gallery" menu item. When hovered over, we want another menu to pup up with a list of gallery categories or similar.

The above CSS sets the new list's display to "none", which hides it to begin with. Next we position it absolutely. Remember we set it's parent to position relative? well because we did that we can now position this list relative to the previous one. You may notice that the distance from the left is greater than the width of the parent element, this is because 15px worth of padding was added to it and so in reality its width is 140px. A white border is also added to the left hand side to keep it in style with the rest of the menu. Finally a hover style is given to the first list's "li" element telling it to display any unordered lists it has inside it. This is the line that creates the rollover effect. Here's what it looks like now .
Fantastic! unless you are using IE that is. Internet Explorer does not think you can give anything other than a link a hover effect, and so ignores it. Because of this there is nothing more we can do that use a bit of Javascript to trigger it to work. Go to this website and download the csshover.htc file . This file tells IE to stop being silly allow hover effects on anything.


 

Read Tutorial at: Click here to view the tutorial

Rate Tutorial:
CSS CSS CSS Pop Up Menu Tutorial

View Tutorial:
CSS CSS CSS Pop Up Menu Tutorial

Related Tutorials:

Displaying 1 - 50 of about 1608 Related Tutorials.

CSS Designer
CSS Designer CSS Designer...;           CSS Designer is now availabe as part of the Web Designer. JointLogic CSS Designer is an Eclipse plugin
 
CSS Editor
CSS Editor CSS Editor  ... sophisticated CSS authoring functionality to the Eclipse Platform. It implements an editor that provides enhanced support for editing CSS source files
 
Implementing CSS and JavaScript in JSP File
Implementing CSS and JavaScript in JSP File Implementing CSS and JavaScript in JSP File    ... shows how to implement css and JavaScript in jsp. Here we have created three main
 
Dojo Menu and Menu Item
Dojo Menu and Menu Item Dojo Menu and Menu Item...; In this section, you will learn about the menu and how to create it in dojo. Try Online: Menu and Menu Item Menu : This is the widget models
 
jQuery Drop Down Menu
jQuery Drop Down Menu jQuery Drop Down Menu...; In this JQuery tutorial we will develop a program  to make Drop Down menu Steps to develop the Drop Down menu . Step 1:        
 
JointLogic Web Designer
Designer and CSS Designer. HTML Designer provides WYSIWYG authoring of HTML and XHTML... inspector and Properties view. It integrates with CSS Designer to provide rich authoring of in-line CSS and embedded style sheets. HTML Designer integrates with Eclipse
 
XMLEspresso
: Version 6.0.0 supports editing of DTD and CSS documents.    ...;       It supports context sensitive pop-ups
 
Crate a Popup Menu in Java
Create Popup Menu in Java,Pop Up Menu Example,How to Create Popup Menu in Java Create a Popup Menu in Java  ...; Here, you will learn how to create a Popup menu in Java. Popup menu is the list
 
The Role of AJAX in enhancing the user experience on the Web
but a combination of several existing technologies in a new way. These include HTML, CSS... on a menu item in some other segment. Even in case of an error in one
 
JSF messages Tag
the message then CSS can be used. If you want to show the error message for a component in a color and other information in different color then CSS can be helpful. Two... : It is used to set the CSS style definition for the component.  title
 
Dojo Tutorial
DOJO Tutorial Dojo Tutorial  ...; In this tutorial, you will learn everything about the dojo. After completing the tutorial.... This advanced Dojo tutorial covers: Introduction to DOJO
 
Graphics Designer Jobs
based layout, DreamWeaver,CSS and JavaScript. Developing website templates... knowledge HTML, DHTML, Adobe Photoshop, CSS, JavaScript FrontPage & Dream
 
Photoshop Tutorial :background image
design as pattern and for this go to Edit > Define Pattern. A pop up menu.... Fill: Now go to Edit menu > Fill and a pop up menu will come in front... Photoshop Tutorial : Make a bullet background Make
 
Photoshop Tutorial : Text Effect
in this tutorial. Let's try Take a new file: Go to file menu and select new. A pop up menu will come, In that menu you have to control the width and height...;    This is a text effect tutorial. This tutorial
 
Menu Bar in Java
choose in a menu bar. In this Tutorial we want to describe you how to create a Menu... Menu Bar in Java Menu Bar in Java...; A Menu Bar is a set of option that allow the user to choose from any one
 
Java Server Faces (JSF) Tutorial
JSF Tutorial,JSF Tutorials,Java Server Face,Java Server Faces,Online JSF Tutorial JSF - Java Server Faces Tutorials...;  Complete Java Server Faces (JSF) Tutorial - JSF Tutorials
 
Open Source Forum/Bulletin Board Software written in Java

 
JComboBox - Tutorial on JComBoBox
combo box, and in this case the user can either choose from the pop-up menu... There are several ways to select one of many fixed choices: radio buttons, a menu... menu and is often the best component to use because it uses less space
 
Backing Up and Restoring A MySQL Database
Backup MySQL,MySQL Backup,Backing Up and Restoring A MySQL Database Backing Up and Restoring A MySQL Database   ...; This tutorial explains the how to backup and restore the MySQL Database
 
Objective C Tutorial
of Objective c like views and controls, menu items etc. In this tutorial first we... Objective C Tutorial,Objective C Tutorials Objective C Tutorial        
 
Beginners Java Tutorial
java Beginner,java Beginners,Beginning java,Beginners Java Tutorial,Java for beginners Beginners Java Tutorial...; This tutorial will introduce you with the Java Programming
 
Beginners Java Tutorial
java Beginner,java Beginners,Beginning java,Beginners Java Tutorial,Java for beginners Beginners Java Tutorial...; This tutorial will introduce you with the Java Programming
 
What is POP?
What is POP, POP What is POP?  ...; a special language for sending and receiving mail that is known as POP. POP ...; internet connection. POP has a small email server with some limited space that saves
 
GUI Tutorial I - FIRST DRAFT
Vanilla Java: GUI Tutorial First Draft Table of Contents GUI Tutorial I - FIRST DRAFT Table... after reading this tutorial. The tutorial presents model programs of increasing
 
Tomahawk selectManyMenu tag
;. This renders the menu of options where only one is visible at a time...; is that listbox can be set to any size and menu is always set to size "1"... user can select the items by scrolling the arrow icon up and down but its
 
Backing Up and Restoring A MySQL Database
Backup MySQL,MySQL Backup,Backing Up and Restoring A MySQL Database Backing Up and Restoring A MySQL Database  ...; This tutorial explains the how to backup and restore the MySQL Database
 
Photosho Tutorial : How to make a tidy bear.
. In this tutorial we are going to make a teddy bear design and follow the simple...: Go to Filter Menu > Blur > Gaussian Blur and make adjustment. Add Noise: Go to Filter Menu > Noise > Add Noise and make similar setting. Motion
 
Photoshop Tutorial : How to make a speaker design
;    Get ready to learn my new design, in this tutorial you... some simple steps to teach you easily so follow my this tutorial. New File: First.... Gradient Overlay: Go to Layer Menu > Layer Style > Gradient Overlay
 
jQuery Toggle the Div
; In this JQuery tutorial we will develop a program that toggle the content...(); }); }); </script> <style type="text/css"> body { font-family...;  and having correponding style css. #click_here{ padding:5px; border:2px
 
Setting up MySQL Database and Tables
Setting up MySQL Database and Tables... for our struts- hibernate integration tutorial. Our application is very very simple.... Here is the complete sql script for setting up the database.      
 
Tomahawk navigationMenuItem tag
to provide the menu items and sub items. The label for the item is set using... by this navigation menu item. split : The split attribute expects a boolean value that, when true, indicates that this menu should be split when it is rendered
 
Display Data from database in Popup Window Using Ajax in JSP
data  in pop up window. We created  file view.jsp, windowopen.jsp..., resulting open a new pop up window "windowopen.jsp" and display... on the "Select" button on page 'windowopen.jsp' the pop up window
 
Create Menu Bar in SWT
Create Menu Bar in SWT Create Menu Bar in SWT...;   This section illustrates you how to create a menu bar. In SWT, the classes Menu and MenuItem of package org.eclipse.swt.widgets
 
Eliminate Spyware & Adware
by clicking on pop up ads. Your PC see which spyware or adware agents... with those annoying "pop up" ads!  If some music, files or documents has been downloaded and suddenly started getting annoying ads popping up
 
Quartz Tutorial
Quartz Tutorial, Quartz Scheduler, Quartz Job Scheduler Quartz Tutorial        ...;      In this Quartz Tutorial you will how
 
The Cheapest Way To Speed Up Your PC
The Cheapest Way To Speed Up Your PC The Cheapest Way To Speed Up Your PC  ... thing you can do is shut off all those little programs sucking up your resources
 
Creating Menu using GWT
Creating Menu using GWT Creating Menu using GWT...;   This example describes the Basics for building the Menu using GWT. The steps involved in Building the Menu Structure are described below
 
XML Books
with Java, a complete tutorial about writing Java programs that read and write XML documents. This is the most comprehensive and up-to-date book about integrating XML... how to write XML documents, validate them with DTDs, design CSS and XSL style
 
jQuery To Slide Effects tabs
;   In this JQuery tutorial we will develop a program ..."> <meta http-equiv="Content-Style-Type" content="text/css"> <...> <link rel="stylesheet" href="style/tab.css" type="text/css" media="print
 
jQuery To Fade Effects tabs
;   In this JQuery tutorial we will develop a program  to make...=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css..." type="text/css" media="print, projection, screen"> </head
 
jQuery To Custom tabs
; In this JQuery tutorial we will develop a program  to make... http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv...="stylesheet" href="style/tab.css" type="text/css" media="print, projection, screen
 
jQuery To Simple tabs
; In this JQuery tutorial we will develop a program  to make simple...;meta http-equiv="Content-Style-Type" content="text/css"> <meta http...="stylesheet" href="style/tab.css" type="text/css" media="print, projection
 
Welcome to the Apache Struts Tutorial
- Jakarta Struts Tutorial Struts1 Examples Struts 2 Training! Get... in this tutorial. Struts1 vs Struts2 Struts2 is more powerful... Validators Example In this tutorial you will learn how to develop Custom
 
VoIP Tutorial
VoIP Toturial VoIP Tutorial   ...;          VoIP Technical Tutorial...;        VoIP Tutorial - Understanding VoIP
 
Maven2 Tutorial
Maven2 Tutorial Maven2 Tutorial... organizations. This tutorial provides you introduction to Maven 2, shifting.... Setting Up A Maven2 Repository Maven2 Repository: 
 
Tomahawk selectOneMenu tag
one  among the list of available options. In the menu only one option... between listbox and menu. listbox can be specified of any size but menu is set to size... language of the component when displayed. style : It is used to set the CSS
 
JavaScript array pop
JavaScript array pop JavaScript array pop... the JavaScript's array object pop() method removes an element from the bottom of the array... of JavaScript array pop method we have created an array of the length 5 and then added
 
Java Building a Simple Web Service ? A Tutorial Tutorial
Building a Simple Web Service ? A Tutorial Building a Simple Web Service ? A Tutorial...;    Introduction In this tutorial we will create a simple web
 
How to make text effect
below pop up menu. Your image will look like this. Final result... a tutorial that is base on text effect. It has so easy steps, you will not have any doubt during learn this tutorial. Let's start learn New File: Take a new file
 
Java Complete Hibernate 3.0 Tutorial Tutorial
Hibernate Tutorial,Hibernate 3 Tutorials,Java Hibernate Example,Hibernate Online Code Complete Hibernate 3.0 Tutorial...; This tutorial provide step by step instructions on using Hibernate
 
Site navigation
 

 

Send your comments, Suggestions or Queries regarding this site at roseindia_net@yahoo.com.

Copyright © 2006. All rights reserved.