web-dev-qa-db-fra.com

Comment puis-je faire une barre de menus fixe sur le dessus lors du défilement

Je voudrais faire une barre de menu, qui est fixée en haut de la page lors du défilement. Quelque chose comme le menu supérieur de Facebook.

De plus, je veux un div tenant le flotteur du logo à gauche de la barre de menus et un flotteur de navigation à droite de la barre de menus.

htmlcssmenubarcss-position
12
Jensen

Cela devrait vous aider à démarrer

 <div class="menuBar">
        <img class="logo" src="logo.jpg"/>
        <div class="nav"> 
            <ul>
                <li>Menu1</li>
                <li>Menu 2</li>
                <li>Menu 3</li>
            </ul> 
        </div>
    </div>



body{
    margin-top:50px;}
.menuBar{
    width:100%;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    left:0;
    }
.logo{
    float:left;
    }
.nav{
    float:right;
    margin-right:10px;}
.nav ul li{
    list-style:none;
    float:left;
    }
15
Dominic Green
 #header {
        top:0;
        width:100%;
        position:fixed;
        background-color:#FFF;
    }

    #content {
        position:static;
        margin-top:100px;
    }
14
demas

pour définir un div à la position fixe, vous pouvez utiliser

position:fixed
top:0;
left:0;
width:100%;
height:50px; /* change me */
4
holographix

Le postition:absolute; tag positionne l'élément par rapport à son parent immédiat. J'ai remarqué que même dans les exemples, il n'y a pas de place pour le défilement, et quand je l'ai essayé, cela n'a pas fonctionné. Par conséquent, pour retirer le menu flottant facebook, le position:fixed; tag devrait être utilisé à la place. Il déplace/conserve l'élément à l'emplacement donné/spécifié, et le reste de la page peut défiler en douceur - même avec les éléments réactifs.

Veuillez voir documentation d'attribut de position CSS quand vous le pouvez :)

3
Migisha