어떻게 코드를 작성 하시겠습니까? SO 메뉴

Question

저는보기 좋게 배울 사람입니다. 현재 저는 15 년 동안 데스크톱 응용 프로그램을 개발 한 후 웹 개발 분야에 뛰어 들고 있습니다. 나는 아직도 현대 웹 사이트를 개발하는 데 사용되는 모든 웹 기술에 익숙해 져있다. 멋진 UI 요소와 구현 방법을 살펴 본다. | 그래서 나는 웹 전문가 ... wexperts : 당신은 SO 메뉴를 코딩 할 수있는 몇 가지 정직 또는 창조적 인 방법은 무엇

...

유래 로고를 물어 줄 알았는데 질문 | 태그 | 사용자 | 배지 | 답이 없다. 스페이스 |

• 는 간단한 테이블 (나는 사람들이 나쁜 것으로 그들에 하프 알고,하지만 난 놈이야 기억)를 사용겠습니까 질문하기?
• CSS 상대 위치 지정을 사용하는 것이 현명합니까? 아니면 여러 브라우저가이를 다르게 구현한다고 생각하니?
• JQuery를 사용하여 쉽게 구현할 수 있습니까? 아니면 GWT?

• 후드 아래의 코드 (이 질문에 표시됨)는이 메뉴를 정렬되지 않은 목록으로 표시하지만 정렬되지 않은 목록은 일반적으로 세로 형이며 게시 할 질문 목록과 유사합니다. 이 경우 메뉴로 <ul> 요소는 어떻게 사용됩니까? 모든 도움에 미리

  

  <div id="hmenus"> 
       <div class="nav"> 
        <ul> 
         <li class="youarehere"><a href="/questions">Questions</a></li> 
         <li><a href="/tags">Tags</a></li> 
         <li><a href="/users">Users</a></li> 
         <li><a href="/badges">Badges</a></li> 
  

감사합니다! 제가 마지막으로 물었던 비슷한 구조의 질문에서 당신은 도움이되었다. 난 정말 당신의 응답을 :) 읽은 후 나는 훨씬 더에 대해 읽어 봤는데 개념을 이해

Answer 1

나는 ( 현재 페이지입니다 질문을 가정) 그것을 다음처럼 작성할 수 있습니다 : 다음

<div class="nav"> 
    <ul> 
     <li class="youarehere"><a href="/questions">Questions</a></li> 
     <li><a href="/tags">Tags</a></li> 
     <li><a href="/users">Users</a></li> 
     <li><a href="/badges">Badges</a></li> 
     <li><a href="/unanswered">Unanswered</a></li> 
    </ul> 
</div> 

나는 CSS를 다음과 같이 사용합니다 :

.nav li 스타일의 float: left;에 주목하십시오. 그것이 목록을 수평으로 만드는 이유입니다.

.nav 
{ 
    float: left; 
    font-size: 125%; 
} 
.nav ul 
{ 
    margin: 0; 
} 
.nav li 
{ 
    background: #777; 
    display: block; 
    float: left; 
    margin-right: 7px; 
} 
.nav .youarehere 
{ 
    background: #f90; 
} 
.youarehere a 
{ 
    color: #fff; 
} 
.nav li:hover 
{ 
    background-color: #f90; 
} 
.nav a 
{ 
    color: #fff; 
    display: block; 
    font-weight: bold; 
    padding: 6px 12px 6px 12px; 
    text-decoration: none; 
} 

좋아, 아마 <div> 요소를 생략하는 것을 선호합니다 ...이 같은 정확히을 그것을 할 것입니다 정직과 <ul> 요소에 id="nav"을 넣어 ... 더 의미 그렇게 기분 .

Answer 2

http://css.maxdesign.com.au/listamatic/

이 당신을 도움이 될 것입니다, 다양한 CSS 메뉴에 대한 예제와 가이드의 번호를 가지고!

Answer 3

요즘에는 정렬되지 않은 목록을 사용하여 탐색 버튼을 만드는 것이 일반적입니다.

당신은이 같은 뭔가를 jQuery를하거나 GWT를 필요로하지 마십시오을 사용 : 이것은 당신이 필요로하는 모든 것입니다 pseudoclass

a:hover { 
    color: red; 
} 

Answer 4

를 가져. 그것은 매우 간단합니다. IE 5.5-8, Opera, FF, Safari 및 Chrome과 같은 중요한 작업에서 놀라 울 정도입니다.

.nav ul, .nav li { 
    margin: 0; 
    padding: 0; 
    list-style-type: none; 
    float: left; 
} 
.nav a { 
    display: block; 
    background-color: #777777; 
    color: #fff; 
    padding: 7px; 
    margin-right: 5px; 
    font: normal bold 16px Arial,Helvetica,sans-serif; 
    text-decoration: none; 
} 
.nav a:hover, 
.nav .youarehere a { 
    background-color: #FF9900; 
} 

• 없음 테이블이 없습니다. 이것은 가변 폭 열의 한 행이므로 필요가 없습니다.
• 상대 위치 지정이 필요하지 않습니다. 단지 float: left;을 켜십시오.
• 이에 대한 클라이언트 측 스크립팅을 구현할 필요가 없습니다. 어떤 로직이보기를 제어하고있어 페이지로드를 준비 할 수 있도록 class = "youarehere"로 설정하는 것이 가장 좋습니다 (DOM 및 JS가로드되고 현재 최상위 레벨을 파악할 때까지 기다릴 필요가 없습니다) .
• UL의은 (되었는지 여부에 관계없이 수직 또는 수평) 탐색이 무엇인지 정말 목록의 모든 종류에 대한 의미 올바른지 내가 탐색을위한 정렬되지 않은 목록을 사용

Answer 5

. li 요소는 왼쪽으로 떠있었습니다. li 안에있는 앵커는 필요한 모양을 내기 위해 스타일이 지정됩니다.

활성 링크에서 youarehere 클래스를 사용하는 대신 본문에 클래스를 적용하고 활성 링크를 다소 다음과 같이 표시합니다 : body.questions ul.nav li.questions-link:link, body.questions ul.nav li.questions-link:visited {...}. (아마도이 ​​많은 선택기를 사용하지 않을 것입니다.) body 클래스를 사용하면 번거롭게 (예 : 다른 배경 이미지 나 색 구성표 등) 훨씬 더 많은 사용자 지정 작업을 수행 할 수 있습니다.

SO 로고는 h1이며 이미지를 CSS로 대체하여 이미지를 표시합니다.

IE 브라우저 문제는 조건부 주석으로 처리됩니다.