메뉴 색상 및 메뉴 문제

Question

그래서 두 가지 문제가 있습니다. 그 중 하나는 내가 "홈"에있을 때 "정보"위로 마우스를 가져갈 수 있다는 것인데, 홈 컬러는 홈 컬러가 기본 회색으로 되돌아 가야합니다. 내가 현재 (집)에있는 페이지가 텍스트 상자에 흰색으로 만 켜지는 동안 주위에 회색 상자가있는 흰색 텍스트로 가져갈 메뉴 항목을 원합니다. 또한, 마우스를 움직일 때 (메뉴 항목 위에 마우스를 올려 놓지 않은 상태), 흰색 색상은 내가 마지막으로 가리킨 항목에 머물러 있습니다. 내가 현재 (집)에있는 텍스트를 흰색으로하고 싶습니다.

내가 눈치 또 다른 문제는 내가 정보 탭으로 이동하면, "크기"(패딩?) 나는 홈 탭에있어 것보다 버튼에 대해 홈 &와 다른 점이다. 그것은 CSS 파일에 있기 때문에 모든 페이지에 적합합니다. 맞습니까?

나는 Webdesign 클래스를위한 웹 사이트를 만들고 있는데, 이것으로 아주 새로워졌지만 복사 + 붙여 넣기 없이도 람보르기니 웹 사이트를 거의 재현 할 수있었습니다. 메뉴 시스템에서 무슨 뜻인지 알게 될 것입니다. (메뉴 항목 위로 마우스를 가져 가면 현재 메뉴 항목이 흰색 (색상) (텍스트)으로 유지되지만 글꼴은 흰색으로 표시되고 회색 상자는 회색으로 표시됩니다. 상자). 기본적으로 Lamborghini Homepage (메뉴 항목과 하위 메뉴를 가리키는 곳)에서와 같은 종류의 드롭 다운 메뉴가 있습니다.

코드 (메뉴) CSS는 :

#dolphincontainer{ 
    position:relative; 
    color:#E0E0E0; 
    background:#000000; 
    padding-top:40px; 
    width:100%; 
    font-family:Helvetica,Arial,Verdana,sans-serif; 
} 
#dolphinnav { 
    position:relative; 
    font-size:16px; 
    text-transform:uppercase; 
    font-weight:bold; 
    background:#000000 url(images/dolphin_bg.gif) repeat-x bottom left; 
    padding:0 0 0 60px; 
} 
#dolphinnav ul{ 
    margin:0; 
    padding:0; 
    list-style-type:none; 
    width:auto; 
    float:left; 
} 
#dolphinnav ul li { 
    display:block; 
    float:left; 
    margin:0 1px; 
} 
#dolphinnav ul li a{ 
    display:block; 
    float:left; 
    color:#3D3D3D; 
    text-decoration:none; 
    padding:0 10 0 20px; 
    height:10px; 
} 
#dolphinnav ul li a span { 
    padding:12px 20px 0 0; 
    height:21px; 
    float:left; 
} 
#dolphinnav ul li a:hover { 
    background:transparent url(images/dolphin_bg-OVER.gif) repeat-x bottom left; 
} 
#dolphinnav ul li a:hover span { 
    display:block; 
    width:auto; 
    cursor:pointer; 
} 
#dolphinnav ul li a.current,#dolphinnav ul li a.current:hover{ 
    color:#fff; 
    background:#000000 url(images/dolphin_left-ON.gif) no-repeat top left; 
    line-height:275%; 
} 
#dolphinnav ul li a.current span { 
    display:block; 
    padding:0 20px 0 0;width:auto; 
    background:#000000 url(images/dolphin_right-ON.gif) no-repeat top right; 
    height:33px; 
} 
#dolphin_inner{ 
    color: white; 
    padding: 5px; 
    font-size: 80%; 
    height: 1em 
} 

#dolphin_inner a:link, 
#dolphin_inner a:visited, 
#dolphin_inner a:active{color: white} 
#dolphin_inner a:hover{color: yellow} 
body {background-color:#000000;} 
.innercontent{display: none;} 

코드 (메뉴) HTML : 이것은 매우 쉽게 이루어집니다

<div id="dolphincontainer"> 
<div id="dolphinnav"> 
<ul> 
<li><a href="index.html"><span>Home</span></a></li> 
<li><a href="about.html"><span>About</span></a></li> 
</ul> 
</div> 
<div id="dolphin_inner"> 
<div id="about" class="innercontent"> 
</div> 
</div> 
</div> 

<script type="text/javascript"> 

//dolphintabs.init("ID_OF_TAB_MENU_ITSELF", SELECTED_INDEX) 
dolphintabs.init("dolphinnav", 0) 

</script> 

Answer 1

. JSfiddle HERE 메뉴는 다음과 같습니다.

<div> <ul> 
    <li><a href="#" class="active">Home</a></li> 
    <li><a href="#">Heritage</a></li> 
    <li><a href="#">Models</a></li> 
    <li><a href="#">Dealers</a></li> 
    <li><a href="#">Experience</a></li> 
    <li><a href="#">Store</a></li> </ul>​ </div> 

다음과 같은 CSS가 있습니다. 내가 무슨 짓을했는지이

$(function(){ 
    $('a').hover(function(){ 
     $('a').removeClass('hover'); 
     $(this).addClass('hover'); 
    }); 
});​ 
​ 

같은

body{ 
    background: black; 
} 
li{ 

    float: left; 
    margin-right: 10px; 
} 
a{ 
    color: gray; 
    text-decoration: none; 
    padding: 5px 10px; 
} 
a:hover{ 
    color: white; 
    background: gray; 
} 
a.active{ 
    color: white; 
} 
.hover{ 
    color: white; 
} 

그리고 JQuery와 현재 페이지 클래스 "활성화"를 갖는다. 클래스가 "활성"이면 CSS 색상 흰색을 제공합니다. 다른 Jquery 코드를 사용하면 현재 어느 페이지에 있는지 감지 할 수 있습니다. 나는 그것을 여기에 포함시키지 않았다 ... 아마 당신이 정말로 그것을 원한다면 나중에. 그러나 가장 중요한 점은 해당 페이지에있을 때 "<a href='#'>" 클래스에 "활성"클래스를 부여 할 수 있다는 것입니다.

좋아요 다음 ...

나는 "호버"를 사용했습니다. 링크 나이 경우 탐색 항목 위로 마우스를 가져 가면 "hover"클래스를 부여합니다. CSS를 볼 경우 ".hover"에는 "color : white;"가 있습니다. 항목 위에 마우스를 가져 가면 클래스가 "마우스를 올리면"클래스가 제거되지만 지금 당장 마우스를 가져 가면 "가져갑니다"클래스에 추가됩니다.

희망이 있습니다.