Как выделить активное меню в CSS

Question

Как выделить активное меню в CSS

0

У меня есть верхнее меню, которое выглядит следующим образом:

Но когда я выбираю дом или любые другие предметы, я хочу, чтобы он был выделен. То есть, когда он активен, я хочу, чтобы он имел только другой цвет, чем другие.

Мое меню 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>

Поэтому для выделения (активной) я попытался добавить следующий код в свой css:

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

Но это не дает выход, который я хочу.

Как мне это сделать. Помоги пожалуйста.

user2958359 15 дек. 2013, в 23:08

Источник

1

Ваш css с .active - это имя класса, которое должно быть применено к li для его запуска. Таким образом, вы не получите желаемых результатов с помощью .active если вы не используете javascript для установки active класса в li при событии click.
ScottS 15 дек. 2013, в 21:51
0

... и, если ваша страница выполняет полный постбэк, вы потеряете этот класс. Если вы хотите, чтобы он сохранялся, вам придется хранить, извлекать и сбрасывать атрибут класса.
Steve Wellens 15 дек. 2013, в 21:55

Теги:

html

css

menu

4 ответа

Ещё вопросы

Ваш css с .active - это имя класса, которое должно быть применено к li для его запуска. Таким образом, вы не получите желаемых результатов с помощью .active если вы не используете javascript для установки active класса в li при событии click.
... и, если ваша страница выполняет полный постбэк, вы потеряете этот класс. Если вы хотите, чтобы он сохранялся, вам придется хранить, извлекать и сбрасывать атрибут класса.

Pedro Moreira · Answer 1 · 2013-12-15T18-50-00.000Z

Если вы хотите активное состояние, вы должны использовать li: active

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

Я хочу, чтобы цвет присутствовал, пока я не на странице. Я просто показываю цвет при нажатии на него.
Итак, вам нужно использовать некоторый JavaScript для добавления класса .active. Возникли проблемы с оверлеями CSS, используйте правило! Important

CRABOLO · Answer 2 · 2013-12-15T19-12-00.000Z

способ сделать это с помощью только css - если каждая страница тела имеет уникальный класс /id

например, если на вашей домашней странице и на домашней странице есть что-то вроде этого

<body id="home_page">

Затем вы можете сделать это, чтобы элемент меню главной страницы оставался высоким

    #home_page .home_li { 
background-color: silver; 
}

Вам также нужно будет указать каждому элементу верхнего меню свой собственный идентификатор или класс, например.home_li, чтобы это работало

Затем вы делаете то же самое для других страниц только с разными классами/идентификаторами

McElie · Answer 3 · 2015-02-04T05-32-00.000Z

Пожалуйста, попробуйте следующее:

<!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;
}

huda · Answer 4 · 2013-12-15T19-21-00.000Z

0

пытаться:

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

huda 15 дек. 2013, в 19:21

0

Я хочу, чтобы цвет присутствовал, пока я не на странице. Я просто показываю цвет при нажатии на него.
user2958359 15 дек. 2013, в 22:00