极品CSS横向菜单收藏 Horizontal CSS Menus
4.1
Glossy Horizontal Menu
A
nicely curved, glossy looking horizontal menu. Three images are used to
create the interface- an underlining repeating gradient image, plus
left and right parts of a sliced tab image for the selected tab.
4
CSS Indent Menu
Using
two gradient background images, this horizontal CSS menu makes the
active/ selected menu item appear indented. The width of the menu is
set to 80% of its container in the demo .The entire menu markup plus
images combined comes in at a very lean 2.5kb.
4.3
Inverted Shift Down Menu II
This
inverted horizontal menu creates tabs where the active tab is both
longer and its text offset downwards compared to its less active
counterparts. It does this by manipulating the tab's top/bottom padding
values plus the color of its bottom border.
3.8
Inverted Shift Down Menu
This
clean CSS horizontal menu contains tabs with text that shift downwards
slightly when the mouse rolls over it. And just for demonstration, it
shows how to make the bottom corners of each tab rounded using CSS3 and
Mozilla's proprietary declarations for rounded corners.
4.1
Inverted Modern Bricks Menu
By popular request, this is an alternate, inverted version of the originalModern Bricks Menu. Markup wise it's slighter smaller than the original version.
4
Modern Bricks Menu
This
is a modern looking, imageless horizontal menu. The selected menu item
merges with the band below it to help it stand out even more. As
mentioned, the menu uses no images, making customization a breeze.
3.8
Glowing Tabs Menu
Glowing
Tabs Menu uses a background image that accentuates the outline of each
tab. And to jazz it up, the selected tab "glows", by using the "Sliding
Doors" technique to shift the original background image upwards to
reveal the glowing version of the tab image. An exquisite yet
professional looking horizontal menu!
4.1
Solid Block Menu
This
is a lean, professional looking CSS menu that's draped in a solid two
color background image. The divider between the menu items is simply a
white CSS border. The style is extremely easy to customize thanks to
the simple background image used.
3.8
CSS Thick Tabs
These
CSS menu tabs come with thick top/bottom padding to achieve that
attractive cushioned look. Setup is very easy- each menu link simply
carries a gradient background image that is changed to a darker version
of the original when the mouse rolls over each menu item.
3.5
Overlapping horizontal tabs
Using
relative positioning and negative margins, this CSS code creates
"overlapping" horizontal tabs that each snug up and slightly overlaps
the tab to the left of it. A nice visual look.
3.7
SuckerTree Horizontal Menu
SuckerTree Horizontal Menu is a CSS and DOM hybrid menu that's list based and supports multiple levels of sub menus.
3.8
Sleek Pointer Menu 2
This is an alternate version of the originalSleek Pointer Menu, one with a more trimmed down interface and with an arrow background that appears only when the mouse moves over a menu item.
3.6
Half moon tab menu
We
named this CSS tab menu "Half Moon" based on its look. The menu uses a
transparent background image for each tab item to create a right round
edge. Easy customization of menu colors and alignment.
3.9
DD Color Tabs II
Based on the same design asDD Colors Tabs,
this second version flips the tabs over to create an inverted look.
Just like the original, you can modify the menu's default and hover
colors just by altering the two color values inside the CSS code. This
is made possible thanks to transparent images used as the menu tabs'
interface.
3.6
Plastic Tabs menu
This
is a no frills, "plastic looking" tabs menu. The entire menu can be
aligned either to the left or right of the page, by setting the menu's
float attribute accordingly.
3.7
Sleek Pointer Menu
An
inverted, round corner CSS menu bar with a cut-out pointer below each
menu link. The pointer is simply a transparent background image,
automatically adopting to any background colors (in this case, black
and darkred).
2.7
Vertical Divider Menu
One
of the most popular CSS menu interfaces around, this is a horizontal
CSS menu that uses an indented vertical divider to separate each menu
item. Each item can change background color when the mouse moves over
it.
4
Slanted Divider Menu
This is an elegant CSS menu bar that uses a transparent "slanted" image to act as a divider and separate each menu item.
3.9
Shade Image Tabs Menu
This
is an attractive "blue shading" image tab menu that supports tabs
alignment. The shade effect is created using two gradient background
images.
4.5
DD Color Tabs
This
is a lightweight, very easy to customize image tabs menu similar to the
one you see throughout Dynamic Drive. Instead of swapping between two
tab images, this menu uses a single transparent tab instead. What this
means is that you can in fact change the menu and menu hover colors
just by changing the two color values inside the CSS code! It doesn't
get simpler than that.
4.1
CF Navigation Menu
This
is CSS based navigational menu based on a single tab interface. Four
images are used as part of its interface- the two round corners, an
indented divider between menu links, and a gradient background image
spanning the menu.
3.7
CF Navigation Menu II
This
is an inverted version of the original CF Navigation Menu. Four images
are used as part of its interface- the two round corners, an indented
divider between menu links, and a gradient background image spanning
the menu.
4.1
Sliding Doors Tabs Menu
This
is a two state rollover image tabs menu based on the popular sliding
doors technique. It uses two images, a right and left tab that shifts
up and down as the mouse moves over a tab, to create a highlight effect.
4.1
Chrome Menu Bar
This
is a lightweight "chrome" looking CSS menu bar. The menu uses two
variants of the same background image to create the hover effect, and
each menu items can easily be set to either align "left", "center", or
"right" on the page, just by changing the "text-align" attribute.
4
CSS Tabs menu
This
is a basic CSS tabs menu, created from an ordinary HTML list. The menu
supports two common requests- the ability to align the menu "left",
"center", or "right" on the page, plus highlight a particular tab so it
appears selected.
3.4
Two level CSS Tabs menu
Building
on a regular CSS Tabs Menu, this CSS menu supports second level content
that can be associated with specific tabs. By giving both a tab and the
desired sub content a class of "selected", the sub content becomes
visible on the page.
4
Underline Horizontal Menu
This
is a sleek CSS horizontal menu with a popular "underline" effect shown
whenever the mouse rolls over a link. Each link (<a>) also
carries a background image, used to as the indented line graphic that
separates each menu item.
4
Bevel horizontal Menu
This
CSS code creates a "3 state" horizontal menu out of an ordinary list.
When the mouse moves over the menu, the menu item bevels up, and in
modern browsers, depressing on the menu also creates a depressed state.
