Salut, 

je suis en train d'essayer de faire des menu qui suivent lorsque l'utilisateur scroll,

j'ai déjà réussis a faire ma barre du haut le problème c'est que j'ai un menu a gauche que je n'arrive pas a faire , mon menu est comme sur les screen : lorsqu'on met sa souris dessus il s'ouvre, sinon on voit que les icones a gauche.

PS : j'aimerais aussi qu'il passe par dessus la barre grise du haut

Et voila son code (il parait long mais c'est juste pour l'organiser) :

          <div class="area"></div><nav class="main-menu">
                <ul>
                              <!---MENU -->
              <li>
                    <a class="headermenu">
                        <i class="fab fa-bitcoin"></i>
                        <span class="nav-text">
                            Start mining
                        </span>
                    </a>
                </li> 
              <li>
                    <a href="slow.php">
                        <i class="far fa-minus-square" aria-hidden="true"></i>
                        <span class="nav-text">
                            Mine slowly
                        </span>
                    </a>
                </li>
              <li class="has-subnav">
                    <a href="medium.php">
                        <i class="far fa-minus-square" aria-hidden="true"></i>
                        <span class="nav-text">
                            Mine mediumly
                        </span>
                    </a>
                </li>
              <li>
                   <a href="fast.php">
                       <i class="far fa-minus-square"></i>
                        <span class="nav-text">
                            Mine quickly
                        </span>
                    </a>
                </li>
              <!---SYSTEM -->
              <li>
                    <a class="headersystem">
                        <i class="fas fa-tachometer-alt"></i>
                        <span class="nav-text">
                            SYSTEM
                        </span>
                    </a>
                </li>
              
                <li>
                    <a href="index.php#how">
                        <i class="far fa-question-circle"></i>
                        <span class="nav-text">
                            How does it works ?
                        </span>
                    </a>
                </li>
                
              <li>
                    <a href="faq.php">
                       <i class="fa fa-info fa-2x"></i>
                        <span class="nav-text">
                            FAQ
                        </span>
                    </a>
                </li>

              <li>
                    <a href="#">
                       <i class="fa fa-check"></i>
                        <span class="nav-text">
                            Terms of Service
                        </span>
                    </a>
                </li>
              <li>
                   <a href="index.php#support">
                        <i class="fas fa-phone"></i>
                        <span class="nav-text">
                            Support
                        </span>
                    </a>
                </li>
            </ul>
        </nav>

.fa-2x {
font-size: 2em;
}

.headermenu, .headersystem, .mainindex  {
  background-color:#f0aa24;
}

.fa, .fab, .fas, .far {
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:white;
border-right:2px solid #455556;
position:absolute;
top:0;
bottom:0;
height:100%;
left: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:black;
 font-family: arial;
font-size: 14px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .05s linear;
transition:all .05s 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;
}

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

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

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 {
background-color:black;
color: #f0aa24;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}

Merci beaucoup a ceux qui daigneront m'aider !

-
Edité par tycyly 13 mars 2018 à 18:30:31

Salut, utilise <position: fixed> à la place de <position: absolute> dans ton .main-menu sa devrait réglé le problème.

absolute -> par rapport à la page.

fixed -> par rapport à l'écran.