Сделать navbar активным только с css

-1

Я редактирую загрузочный navbar и iam, пытаясь сделать вкладку активной с помощью CSS, я искал и только ответы, которые я нашел с помощью js ... Я хотел бы, чтобы ваша помощь была сделана с помощью только CSS, без каких-либо JS.Сделать navbar активным только с css

Вот мой код:

мой HTML:

<!DOCTYPE html> 
<html> 
<head> 
<!-- Latest compiled and minified CSS --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
<!-- Optional theme --> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> 
<!-- Latest compiled and minified JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<link rel="stylesheet" type="text/css" href="style.css"> 
<meta charset="UTF-8"> 
<title>Title of the document</title> 
</head> 

<body> 
<header> 
Title 
</header> 
<nav class="navbar navbar-default"> 
<ul class="nav navbar-nav" id="nav"> 
    <li role="presentation" class="active"><a href="#">Home</a></li> 
    <li role="presentation"><a href="#">Profile</a></li> 
    <li role="presentation"><a href="#">Messages</a></li> 
</ul> 
</nav> 
<div class="gridi"> 
</div> 
<footer> 
<a href="#">Contact me</a> 
</footer> 

</body> 

</html>

мой CSS:

body{ 
    font-family: "open sans"; 
} 
myHero { 
     display:block; 
     background-color:#ddd; 
     padding: 50px; 
     font-size: 30px; 
    } 

header{ 
    width: 1152px; 
    height: 50px; 
    background-color:#ddd; 
    font-size: 30px; 
} 

nav{ 
    width:1152px; 
    height: 50px; 
} 

.navbar-default .navbar-nav>li>a { 
    color: darkorange; 
} 

.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover{ 
    width: 80px; 
    height: 50px; 
    color: #ffffff 
} 

.navbar-default .navbar-nav>li>a:hover{ 
    font-size: 13px; 
    background-color: #f8f8f8 
} 

.active { 
    font-weight: bold; 
    font-size: 33px; 
} 

footer{ 
    padding-top: 9px; 
    padding-left: 10px; 
    border-radius: 5px; 
    left: 122px; 
    top: 625px; 
    background-color: #5f5f5f; 
    width: 900px; 
    height: 34px; 
    font-size: 14px; 
    position:absolute; 
} 

footer>a{ 
    color: #ffffff; 
} 

.gridi{ 
    background-color: #ffffff; 
    width: 1152px; 
    height: 716px; 
} 

.navbar-default .navbar-nav > .active{ 
    color: #000; 
    background: #d65c14; 
}

источник

2015-08-09 ronmar

Да. Проверьте чистый CSS путь:

ul {margin: 0; padding: 0; list-style: none; display: block;} 
 
ul li {display: inline-block; margin: 0; padding: 0; list-style: none;} 
 
ul li input {display: none;} 
 
ul li a {text-decoration: none; border: 1px solid #ccc; padding: 3px 10px; line-height: 1; color: #333; cursor: pointer;} 
 
ul li a:hover, 
 
ul li input:checked + a {background-color: #999; color: #fff;}

<ul> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" /> 
 
     <a>Item 1</a> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" /> 
 
     <a>Item 2</a> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" /> 
 
     <a>Item 3</a> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" /> 
 
     <a>Item 4</a> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input type="checkbox" /> 
 
     <a>Item 5</a> 
 
    </label> 
 
    </li> 
 
</ul>

Для только один отдельных активных в то время:

ul {margin: 0; padding: 0; list-style: none; display: block;} 
 
ul li {display: inline-block; margin: 0; padding: 0; list-style: none;} 
 
ul li input {display: none;} 
 
ul li a {text-decoration: none; border: 1px solid #ccc; padding: 3px 10px; line-height: 1; color: #333; cursor: pointer;} 
 
ul li a:hover, 
 
ul li input:checked + a {background-color: #999; color: #fff;}

<ul> 
 
    <li> 
 
    <label> 
 
     <input type="radio" name="a" /> 
 
     <a>Item 1</a> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input type="radio" name="a" /> 
 
     <a>Item 2</a> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input type="radio" name="a" /> 
 
     <a>Item 3</a> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input type="radio" name="a" /> 
 
     <a>Item 4</a> 
 
    </label> 
 
    </li> 
 
    <li> 
 
    <label> 
 
     <input type="radio" name="a" /> 
 
     <a>Item 5</a> 
 
    </label> 
 
    </li> 
 
</ul>

источник

2015-08-09 20:19:37

Есть ли самозагрузки Navbar, что получил его уже встроенный? @Praveen Kumar – ronmar

@ronmar Nopes ... Пока ничего. –

Сделать navbar активным только с css

ответ

Смежные вопросы