Link does not stay open and active

Question

i have created a navigation that navigates back and forth between sections. I have styled two lists that are supposed to fulfill this task.

List: the active link works there as soon as I click a link. The text and the point are unfortunately upside down. When I change the order, the list name / Nav remains in the visible area
List: there the point and the name are arranged correctly but the active link cannot be combined somehow.

In both examples, the active link does not remain open. I've been trying it out for a long time and I'm a bit overwhelmed.

$('#menu li a').click(function(){    
    $(this).parent().addClass('active').siblings().removeClass('active');


});

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import url(https://fonts.googleapis.com/css?family=Titillium+Web:300);


.fa-2x {
font-size: 2em;
}
.fa {
position: relative;
display: table-cell;
width: 60px;
height: 36px;
text-align: center;
vertical-align: middle;
font-size:20px;
}


.main-menu:hover,nav.main-menu.expanded {
width:250px;
overflow:visible;
}

.main-menu {
background:rgba(255,255,255,.5);
border-right:1px solid #e5e5e5;
position:fixed;
top:0;
bottom:0;
height:100%;
right:0;
width:60px;
overflow:hidden;
-webkit-transition:width .05s linear;
transition:width .05s linear;
-webkit-transform:translateZ(0) scale(1,1);
z-index:1000;
}

.main-menu>ul {
margin:7px 0;
}

.main-menu li {
position:relative;
display:block;
width:250px;
}

.main-menu li>a {
position:relative;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#999;
 font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .1s linear;
transition:all .1s linear;
  
}

.main-menu .nav-icon {
position:relative;
display:table-cell;
width:60px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}

.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
  font-family: 'Titillium Web', sans-serif;
}

.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}

.no-touch .scrollable.hover {
overflow-y:hidden;
}

.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}

a:hover,a:focus {
text-decoration:none;
}

nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}

nav ul,nav li {
outline:0;
margin:0;
padding:0;
}
.main-menu li:hover>a,nav.main-menu li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch .dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#999;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 300;
  src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff');
}

.active{
background-color:#f30; 
}

section {
    height: 100vh;
    color: rgba(255,255,255, .5);
    font-size: 20vh;
}
section:nth-child(odd) {
    background: blue
}
section:nth-child(even) {
    background: red
}

h2 {
    text-align: center;
    font-size: 3em !important;
}
#nav {
    position: fixed;
    height: 100%;
    right: 0;
    z-index: 1;
    top: 0;
    background: rgba(255, 255, 255, .5);
    padding: 5px;
    box-shadow: 0 0 6px #555;
}
.list-group-item {
    background-color: rgba(0,0,0,0) !important;
    border: none !important;
    font-size: 2em;
}
.list-group-item a, .list-group-item a:hover {
    color: #fff;
    text-decoration: none;
}
.inner {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}
.inner a, .inner a:hover {
    color: #fff;
    text-decoration: none;
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}
section {
    height: 100vh;
    color: rgba(255,255,255, .5);
    font-size: 20vh;
}
section:nth-child(odd) {
    background: blue
}
section:nth-child(even) {
    background: red
}
.test {
    padding: 0 15px !important;
}
.test:hover .later {
    display: block;
    text-align: right;
}
.test:hover .before {
    display: none;
}
.test .later {
    display: none;
    z-index: 100;
}
.test .before {
    display: block;
    z-index: 50;
    text-align: right;
}



Section 1
Section 2 
Section 3
Section 4
Section 5


  
    
       •Nav 1 •
    
    
       •Nav 2 •
    
    
       •Nav 3 •
    
    
       •Nav 4 •
    
    
       •Nav 5 •

-> Active status

Link does not stay open and active

Answers (1)

Related Questions