웹 페이지의 메뉴 단추에 표시 할 솔루션을 찾고 있습니다. 클라이언트 측 코드 (예 : jQuery 플러그인 등)를 사용하는 것이 좋습니다. 유일한 요구 사항은 기본 버튼 모양과 느낌이 잘 혼합되어야한다는 것입니다. 내가 사용할 수있는 메뉴 버튼의 예는 Gmail의 라벨 또는 액션 버튼입니다.웹 페이지의 메뉴 단추
나는 YUI Menu 버튼 위젯을 이미 살펴 봤지만, 나는 많은 의존성을 도입해야하기 때문에 조금 주저하고있었습니다. 그것으로.
GMail 버튼에 익숙하지 않습니다. 그러나 CSS를 사용하면 버튼을 사용자 정의 할 때 많은 자유를 누릴 수 있습니다. 이것은 html리스트를 사용하고 CSS로 장식 할 수 있습니다.
이 HTML을 같이 뭔가를 게시 할 수있는 :
<ul id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
이 </ul>
이 그런 다음 CSS 그와 많이 할 수있는, 같은 :
#menu li { list-style:url('customimage.jpg'); padding:.5em; margin:1em; width:12em; background-color:#F00; border:1px solid #000;}
그러면 빨간색 배경색과 검은 색 테두리가있는 특정 채우기 및 여백과 함께 사용자 지정 글 머리 기호 (목록 스타일)가있는 메뉴 목록을 얻을 수 있습니다. 각 항목은 12em (약 125px) 너비가됩니다.
당신은 멋진 얻을 수 및 CSS에이를 추가 할 수
#menu li:Hover {border:1px solid #FF0;}
이 내용이 도움이 되셨기를 바랍니다. Google에서 CSS 메뉴 자습서를 검색하고 간단하고 정교한 자습서를 찾을 수 있습니다.
난 당신이 CSS-스프라이트를 찾고 생각
일부 리소스는
Basic explanation - AListApart
Design Guides - SmashingMagazine