심플한 블록 메뉴 Clean CSS Block Navigation

VickiWorks Studio에 서 제공하는 가볍고 깔끔한 CSS 블록 네비게이션 메뉴. 단 몇줄의 코드만으로 유치하지 않은 검색엔진 친화적 메뉴를 작성 할 수 있다. Nick La의 검색 엔진 친화 최적화에 대한 블로그를 보면 왜 CSS 메뉴가 플래쉬 메뉴보다 탁월한지에 대해 아래와 같이 서술하고 있다. Many designers make this mistake by using Flash menus such as those fade-in and animated menus. They might look cool to you but they can’t be seen by the search engines; and thus the links in the Flash menu will not be followed.
SEO에 대한 보다 심청적인 내용에 대해 알고 싶다면 Nick La의 webdesignerwall.com에 기재된 SEO Guide for Designers 기사를 참고하기 바란다. 아무튼 첨부 된 파일은 다음과 같이 HTML 코드와 CSS 코드를 가지고 있으니 자신의 사이트에 직접 추가해 본다. XHTML / CSS Code HTML Code
view plaincopy to clipboardprint? <ul class="menu"> <li><a href="#">Menu01<br /><span>Short desc</span></a></li> <li><a href="#">Menu02<br /><span>Short desc</span></a></li> <li><a href="#">Menu03<br /><span>Short desc</span></a></li> </ul> <ul class="menu"> <li><a href="#">Menu01<br /><span>Short desc</span></a></li> <li><a href="#">Menu02<br /><span>Short desc</span></a></li> <li><a href="#">Menu03<br /><span>Short desc</span></a></li> </ul>
CSS Code
view plaincopy to clipboardprint? ul.menu { margin:0;padding:0; } ul.menu li { display:block;padding:0; float:left;text-align:left;margin-right:2em; } ul.menu li a { color:#fff;font:bold14px georgia;text-decoration:none;line-height: 1.3em; display:block; } ul.menu li a:hover { color:#ffc300; } ul.menu li span { font:11pxarial; color:#666; margin:0; } ul.menu li span:hover {color:#999;} ul.menu { margin:0;padding:0; } ul.menu li { display:block;padding:0; float:left;text-align:left;margin-right:2em; } ul.menu li a { color:#fff;font:bold 14px georgia;text-decoration:none;line-height: 1.3em; display:block; } ul.menu li a:hover { color:#ffc300; } ul.menu li span { font:11px arial; color:#666; margin:0; } ul.menu li span:hover {color:#999;} http://www.webtrendawards.com/818