2013-12-15 14 views
0

에 적극적으로 메뉴를 선택하는 I는 다음과 같이 보이는 상단 메뉴가 있습니다 enter image description here어떻게 CSS를

을하지만 가정이나 다른 항목을 선택할 때 나는 강조하고 싶다. 그것이 활동적 일 때 나는 다른 사람들과 다른 색깔을 가지길 원합니다.

내 메뉴 CSS는 다음과 같습니다 :

#cssmenu_top{ height:37px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px; } 
#cssmenu_top > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu_top > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu_top > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu_top > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu_top > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu_top ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu_top > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu_top > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu_top ul li.has-sub:hover > a{ background:#3f3f3f; border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu_top ul li.has-sub:hover > ul, #cssmenu_top ul li.has-sub:hover > div{display:block;} 
#cssmenu_top ul li.has-sub > a:hover{background:#3f3f3f; border-color:#3f3f3f;} 
#cssmenu_top ul li > ul, #cssmenu_top ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu_top ul li > ul{width:200px;} 
#cssmenu_top ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu_top ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 


#cssmenu_top, #cssmenu_top > ul > li > ul > li a:hover{ background:#333333; background:-moz-linear-gradient(top, #333333 0%, #222222 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222)); background:-webkit-linear-gradient(top, #333333 0%,#222222 100%); background:-o-linear-gradient(top, #333333 0%,#222222 100%); background:-ms-linear-gradient(top, #333333 0%,#222222 100%); background:linear-gradient(top, #333333 0%,#222222 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222',GradientType=0); } 
#cssmenu_top{border-color:#000;} 
#cssmenu_top > ul > li > a{border-right:1px solid #000; color:#fff;} 
#cssmenu_top > ul > li > a:after{border-color:#444;} 
#cssmenu_top > ul > li > a:hover{background:#111;} 

그리고 내 페이지에 메뉴를 표시하고있는 방법은 다음과 같다 : 나는를 추가하는 시도 그래서 (활성) 하이라이트

<div id="cssmenu_top"> 

     <ul> 
      <li ><a href="index.php"><span style="text-color:#FF0000;">Home</span></a></li> 

      <li class='has-sub'><a href="#"><span>Add New Question</span></a> 
       <ul> 
        <li><a href="add_question.php?sub=bangla">Bangla</a></li> 
        <li><a href="add_question.php?sub=english">English</a></li> 
        <li><a href="add_question.php?sub=math">Math</a></li> 
        <li><a href="add_question.php?sub=generalscience">General Science</a></li> 
        <li><a href="add_question.php?sub=bangladeshaffairs">Bangladesh Affairs</a></li> 
        <li class='last'><a href="add_question.php?sub=internationalaffairs">International Affairs</a> 

        </li> 
       </ul> 

      </li> 
</ul> 
</div> 

#cssmenu_top ul > li.active{ 
    background-color: #FF0000; 
} 

을하지만 내가 원하는 출력을 제공하지 않습니다 : 내 CSS 코드를 다음과 같습니다.

어떻게 할 수 있습니까? 도와주세요.

+1

'.active '가있는 CSS는 트리거하기 위해'li'에 적용해야하는 클래스 이름입니다. 따라서 클릭 이벤트가 발생하면'active' 클래스를'li' 클래스로 설정하기 위해 javascript를 사용하지 않는 한'.active'를 사용하여 원하는 결과를 얻지 못할 것입니다. – ScottS

+0

... 페이지가 전체 포스트 백을 수행하면 해당 클래스가 손실됩니다. 계속 유지하려면 클래스 속성을 저장하고 검색하고 재설정해야합니다. –

답변

4

당신은 활성 상태, 당신은 리튬 사용해야합니다 : 활성

#cssmenu_top ul > li:active{ 
    background-color: #FF0000; 
} 
+0

나는 페이지에 올 때까지 색이 나타나기를 바란다. 나는 그것을 클릭 할 때 색상을 보여줍니다. – user2958359

+0

그래서, 당신은. javascript를 사용하여 .active 클래스를 추가해야합니다. CSS 오버레이에 문제가있는 경우! important 규칙 –

0

시도 :

#cssmenu_top ul > li:active{ 
    background-color: #FF0000; 
} 
+0

페이지에 올 때까지 색상을 표시하고 싶습니다. 나는 그것을 클릭 할 때 색상을 보여줍니다. – user2958359

1

단지 CSS로 할 수있는 방법 각 신체 페이지에있는 경우입니다 고유 한 클래스/id

예를 들어, 귀하의 홈페이지와 홈 페이지에 다음과 같은 기호가있는 경우

,210
<body id="home_page"> 
그런 다음 홈 페이지 메뉴 항목

또한이

을 작동하려면 .home_li처럼 각각의 상단 메뉴 항목을 그것의 자신의 ID 또는 클래스를 제공 할 필요가
#home_page .home_li { 
background-color: silver; 
} 

을 highighted를 유지하기 위해이 작업을 수행 할 수 있습니다

그런 다음 당신은 다른 클래스/IDS

0

와 다른 페이지에 대해 동일한 할이 시도하십시오

<!doctype html> 



<meta charset='utf-8'> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 

    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script src="script.js"></script> 
    <title>CSS</title> 
</head> 
<body> 

<div id='css'> 
<ul> 
    <li class='active'><a href='#'>Home</a></li> 
    <li><a href='#'>Products</a></li> 
    <li><a href='#'>Company</a></li> 
    <li><a href='#'>Contact</a></li> 
</ul> 
</div> 

및 CSS :

@import url (http://fonts.googleapis.com/css?family=Raleway);

#cssmenu, 
#cssmenu ul, 
#cssmenu ul li, 
#cssmenu ul li a { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    list-style: none; 
    line-height: 1; 
    display: block; 
    position: relative; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#cssmenu:after, 
#cssmenu > ul:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 
#cssmenu { 
    width: auto; 
    border-bottom: 3px solid #47c9af; 
    font-family: Raleway, sans-serif; 
    line-height: 1; 
} 
#cssmenu ul { 
    background: #ffffff; 
} 
#cssmenu > ul > li { 
    float: left; 
} 
#cssmenu.align-center > ul { 
    font-size: 0; 
    text-align: center; 
} 
#cssmenu.align-center > ul > li { 
    display: inline-block; 
    float: none; 
} 
#cssmenu.align-right > ul > li { 
    float: right; 
} 
#cssmenu.align-right > ul > li > a { 
    margin-right: 0; 
    margin-left: -4px; 
} 
#cssmenu > ul > li > a { 
    z-index: 2; 
    padding: 18px 25px 12px 25px; 
    font-size: 15px; 
    font-weight: 400; 
    text-decoration: none; 
    color: #444444; 
    -webkit-transition: all .2s ease; 
    -moz-transition: all .2s ease; 
    -ms-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    margin-right: -4px; 
} 
#cssmenu > ul > li.active > a, 
#cssmenu > ul > li:hover > a, 
#cssmenu > ul > li > a:hover { 
    color: #ffffff; 
} 
#cssmenu > ul > li > a:after { 
    position: absolute; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: -1; 
    width: 100%; 
    height: 120%; 
    border-top-left-radius: 8px; 
    border-top-right-radius: 8px; 
    content: ""; 
    -webkit-transition: all .2s ease; 
    -o-transition: all .2s ease; 
    transition: all .2s ease; 
    -webkit-transform: perspective(5px) rotateX(2deg); 
    -webkit-transform-origin: bottom; 
    -moz-transform: perspective(5px) rotateX(2deg); 
    -moz-transform-origin: bottom; 
    transform: perspective(5px) rotateX(2deg); 
    transform-origin: bottom; 
} 
#cssmenu > ul > li.active > a:after, 
#cssmenu > ul > li:hover > a:after, 
#cssmenu > ul > li > a:hover:after { 
    background: #47c9af; 
} 
관련 문제