Już prawie rozwiązałem problem ładnych przycisków w menu. Poniżej kod:
CODE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.btn-primary {
width: 300px !important;
background: white;
color: black;
box-shadow: 1px 2px 5px white;
border-radius: 0 !important;
border: 0;
height: 25px;
padding: 0px 0px 0px 0px;
margin-left: 0px;
}
.btn-primary:hover {
background: black;
color: white;
}
.btn-primary:active {
background-color: yellow !important;
color: #000;
}
.btn-primary:target {
background: silver !important;
color: #000;
}
.btn-primary:focus {
background: silver !important;
color: #000;
}
</style>
</head>
<body>
<div class="container nopadding">
<h2>Vertical Button Group</h2>
<p>Use the .btn-group-vertical class to create a vertical button group:</p>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
</body>
</html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
.btn-primary {
width: 300px !important;
background: white;
color: black;
box-shadow: 1px 2px 5px white;
border-radius: 0 !important;
border: 0;
height: 25px;
padding: 0px 0px 0px 0px;
margin-left: 0px;
}
.btn-primary:hover {
background: black;
color: white;
}
.btn-primary:active {
background-color: yellow !important;
color: #000;
}
.btn-primary:target {
background: silver !important;
color: #000;
}
.btn-primary:focus {
background: silver !important;
color: #000;
}
</style>
</head>
<body>
<div class="container nopadding">
<h2>Vertical Button Group</h2>
<p>Use the .btn-group-vertical class to create a vertical button group:</p>
<div class="btn-group-vertical">
<button type="button" class="btn btn-primary">Apple</button>
<button type="button" class="btn btn-primary">Samsung</button>
<button type="button" class="btn btn-primary">Sony</button>
</div>
</div>
</body>
</html>
Chciałbym jednak, aby po kliknięciu na którekolwiek z menu zostawał kolor szary (jak jest teraz) ale, żeby znikał dopiero wtedy, gdy klikniemy na inny napis z menu a nie tak jak jest teraz - gdziekolwiek na stronie.
Problem znalazłem już w internecie na stronie: https://stackoverflow.com/questions/3414498...b=votes#tab-top
Na tej stronie po wciśnięciu "Run code snippet" pokazuje się efekt z podanego kodu. Efekt jest zadowalający dla mnie - o to właśnie mi chodzi, lecz niestety przy próbie przepisania tego kodu (nawet w identycznym przypadku) efekt wychodzi mi inny
Może ktoś mi pomóc przerzucić kod w całości? Lub pomóc rozwiązać mój problem?