In this tutorial we will look at the basics of bending a logo around a logo. We will only be looking at the basic of doing ti today. To get a menu to wrap around your logo will require you to fine tune the positioning of menu list items. Every logo is different and every menu item need to be place using CSS individually. So unfortunately there is no cut and paste solution to this problem. However we can show you the basic’s so that you can begin wrapping your menu around your logo as suits you.
This is an image of roughly what it looks like. This is a rough menu and before I used it I would refine the positioning more but it does give you an idea of what is posible using this technique.
In this tutorial we will learn how to create a staggered menu using only CSS.
Sometimes we want to break up the structure of a website to give it character and staggering a menu up and done or left and right is one possible way to do this. Usually this is done with images and CSS which is not very flexible. If we want to change a menu item we have to change out the images by hand, and all the images are place individually. Now lets look at a way to stagger a text menu up and down using only CSS and HTML. No images, And our menu should look like this when finished.
Removing indents from lists in CSS is a common problem encountered by a lot of web developers particularly when starting out. Removing the list style from a list often leaves us with an indent that can be rather annoying to remove and when removed in one browser it may not necessarily remove it from another. This is because some browsers use a default value margin or padding to indent list items and this is not removed by the list style none property. Some browsers use padding some use margins to produce this indent which is where most people run into problems.
The following solution works for both unordered lists <UL> and ordered lists <OL> in all browsers.
When Finished our menu will look something like this.
When a menu item with no sub-menu is hovered the hyperlink will turn a deep red but the overall menu remains the same. If a menu item with a sub-menu is hovered than the menu increases in length to show the hidden menu items. As you can see from the image above it will expand dependant on how many items are actually in the sub-menu.
In 2 of my previous articles I covered how to create a vertical accordion menu using only CSS. In this tutorial I will be showing how to turn that around and create a horizontal accordion menu. So if you are not yet familiar with the basics of the accordion menu check out the HTML and CSS for the vertical accordion menu which we will be converting in this tutorial at the above two links.
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. Continue reading
For a simpler version of the CSS Accordion Menu please visit here.
In this article we are going expand on the Hover Menu’s without Images Tutorial I did yesterday By adding pop out sub-level menu’s. We will be expanding on the existing menu so if you don’t know how to create a vertical css menu or need the code please familiarise yourself with that tutorial before proceeding.
First step like last time is the HTML side of the coding. We need to embed another unordered list inside the list items from our previous menu. When we have place this list inside the other it should look something like this: Continue reading
As requested here is a simple tutorial on how to create a vertical menu that slides out when moused over. Unlike the standard CSS vertical menu that pops out instantly or simply changes color instantly this menu will slide out smoothly using a few of the CSS3 standards.
Before beginning this tutorial it would be a good idea to familiarise yourself with the basics of CSS menu’s. I have a tutorial up on this already Basic CSS Hover menu. Make sure you still have the code from this as we will apply this slide out effect to the previous menu for practice.