티스토리 뷰



웹페이지에 중요한 부분을 차지하고 있는 네비게이션은 플래시 파일로 만들면 더 부드럽고 유연성있는 효과를 만들수 있습니다. 하지만 플래시를 사용하지 못하는 경우는 CSS를 이용해야 합니다. 다음 보기들은 CSS를 이용한 2단구조의 네비게이션 효과를 모아둔 기술입니다.


 

1. The Menu menu

The Menu menu

 

This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. If you want get started with this menu just simple view the source code. Demo in page.

2. Pure CSS hover menu

Pure CSS hover menu
View Demo

In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on.

3. Matte CSS Menu

Matte CSS
View Demo

Matte is a simple CSS menu with rounded corners using two small images only from 13styles. It is maintained by David Appleyard who has lots of simple and advanced CSS-based menus.

4. CSS Blur Menu

CSS Blur Menu
View Demo

This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item.

5. CSS Navigation with Glowing Icons

CSS Navigation with Glowing Icons
View Demo

This beautiful CSS menu technique can be created by following along this extensive step-by-step tutorial.

6. CSS Sliding Door using only 1 image

CSS Sliding Door using only 1 image
View Demo

This slick CSS menu is based on the Sliding Doors technique but only uses one image.

7. Navigation Matrix Reloaded

Navigation Matrix Reloaded
View Demo

This stylish navigation menu technique uses a CSS sprite.

8. CSS Horizontal Menu

CSS Horizontal Menu
View Demo

Ian Main provides a great set of free CSS menus that are stylish and easy to use.

9. Woody CSS Menu

Woody CSS Menu.

 

Woody is a pre-made CSS menu that’s ready to use and has been tested in IE6, IE 7, Firefox, Opera, Safari, Chrome. Demo in the page.

10. Advanced CSS Menu

Advanced CSS Menu

Advanced CSS Menu was created by Nick La and uses an advanced (extraordinary) list menu utilizing the CSS position property. Demo in the page.

11. Simple Yellow Tabbed

Simple Yellow Tabbed

This menu is from CSS Menu Generator which has more free high quality menus. Demo in the page.

12. Vimeo-Like Top Navigation

Vimeo-Like Top Navigation
View Demo

This CSS-based navigation menu is based on the Vimeo primary menu.

13. Apple Like Colorful CSS Menu

Apple Like Colorful CSS Menu

Learn a technique for mimicking Apple’s image rollover CSS menu by following along this menu tutorial. Demo in page.

14. CSS Hoverbox

CSS Hoverbox

 

Inspired by the Hoverbox Image Gallery technique developed by Nathan Smith, CSS Hoverbox leans on the background-position CSS property to superimpose rollover images on top of neighboring menu items. Demo in page.

15. Big CSS Box

Big CSS Box

 

This is an experimental CSS menu that allows you to create a scaling menu that adjusts depending on the browser’s width. Demo in page.

16. Simple CSS-based drop-down menu

Simple CSS-based drop-down menu
View Demo

This is a very basic CSS-based drop-down menu that’s excellent for trying to grok the technique involved in creating drop-down menu that doesn’t require client-side scripting.

17. Two Level Horizontal Navigation in CSS

Two Level Horizontal Navigation in CSS
View Demo

Veerle Pieters provides a CSS menu and tutorial created using text-indent CSS property.

18. Uberlink CSS List Menus

Uberlink CSS List Menus
View Demo

This CSS navigation bar looks and behaves like an image-swapping menu.

19. CSS-Only Accordion Effect

CSS-Only Accordion Effect
View Demo

In this technique, you’ll witness a method for creating a CSS-based accordion menu.

20. Tabbed Navigation Using CSS

Tabbed Navigation Using CSS

 

Here is another excellent method for creating a module tab interface based purely on CSS. Use the tabs in the page to learn about the instructions on how to implement this technique.

21. CSS Mini Tabs (the UN-tab, tab)

CSS Mini Tabs (the UN-tab, tab)
View Demo

This CSS menu on the popular web design agency SimpleBits shows a way for creating mini tabs. View the source code on the demo page to learn how it works (the code is inline and formatted well for readability for your convenience).

22. Drop-Down Menus, Horizontal Style

Drop-Down Menus, Horizontal Style
View Demo

This A List Apart CSS menu technique is for a fly-out submenu that appears on the right of the top-level menu, leveraging the position: absolute CSS property to move the submenu to the appropriate level.

23. List Into a Navigation Bar

List Into a Navigation Bar
View Demo

Roger Johansson of 456 Berea Street shows us the basic principles of turning an unordered list into a navigation bar – it’s a great starting point for beginners to learn about building a semantic HTML structure and then styling it with CSS.

24. CSS Tabs with Submenus

CSS Tabs with Submenus

This CSS menu technique will allow you to create CSS tabs that have submenus for a two-level hierarchy. Demo in page.

25. CSS Block Navigation Menu

CSS Block Navigation Menu

This CSS menu technique allows you to create a navigation menu that has item with descriptions. Demo in page.

26. XHTML & CSS Sprite Navigation

XHTML & CSS Sprite Navigation
View Demo

This stylish CSS sprite menu technique has three states: idle, hover, and clicked.

27. XHTML CSS Tabbed Menu

XHTML CSS Tabbed Menu
View Demo

Learn how to create module tabs without the use of client-side scripting.

28. Cool, Simple, Horizontal CSS Menu

XHTML & CSS Sprite Navigation
View Demo

Learn to create a straightforward technique for creating a CSS based menu.

29. CSS Menu with Descriptions

CSS Menu with Descriptions
View Demo

This technique showcases a method for creating a menu that expands when hovered upon.

30. CSS Hover Button

CSS Hover Button
View Demo

Create CSS button-style navigation menu by checking out this excellent tutorial.


출처: http://sixrevisions.com/css/30-exceptional-css-navigation-techniques/


댓글
  • 프로필사진 nike shoes on sale 한 사람을 잃게 된다는 제일 큰 아쉬움은 내 앞에 있는 니 마음이 변해져 가고있는거야. 2013.03.21 23:58 신고
  • 프로필사진 pandora jewelry 1번,예스라고 할 경우 당장 결혼한다.
    2번, 노라고 할 경우 예스라고 하게 만들어서 당장 결혼한다,Topics related articles:


    http://www.videozine.kr/4 复件 (20) 韩文

    .
    3번,Topics related articles:


    http://twittertip.net/guestbook 复件 (10) 韩文

    , 생각할 시간이 필요하다고 할 경우 하루만 생각할 시간을 주고 당장 결혼한다,Topics related articles:


    http://www.lifelogger.co.kr/category/패션, 复件 韩文

    .
    골라!
    2013.03.23 21:49 신고
  • 프로필사진 pandoras 행복을 졸겨야 할 시간은 지금이다. 행복을 즐겨야 할 장소는 여기다. 2013.03.24 18:12 신고
  • 프로필사진 ghd online 가장 감사해야 할 것은 신이 주신 능력을 제대로 이용하는 것이다. 2013.03.31 01:32 신고
댓글쓰기 폼