Menu ne fonctionne pas comme prévu, arrière-plan, menu au milieu de l'écran

Essaie actuellement de configurer un menu pour des résolutions plus petites, des appareils mobiles I.E et autres.

Le problème que je suis en train d'avoir, c'est l'arrière-plan du menu en taille réelle, background: url (shad2.png) est affiché sur la plus petite version, et je n'arrive pas à trouver un moyen de l'enlever.

Ma deuxième question est la suivante. Comment puis-je créer une fenêtre "pop-out" pour mon menu + le même aspect que ce menu a http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/#nav REDUISEZ LA FENETRE ET VOUS VOUS SENTIREZ ! Je veux que mon menu ait la même sensation, mais avec mes couleurs et autres! Parce que maintenant mon menu apparaît au milieu de l'écran, au lieu de directement sous le bouton de menu! Merci

Jsfiddle http://jsfiddle.net/yD7dM/

Voici mon code actuel:


<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>egen hemsida</title>
 <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="stylesheet" type="text/css" media="screen" href="mobilemenu.css"/>
        <link rel="stylesheet" type="text/css" href="screen.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
        <script>
        $(document).ready(function(){
            $(".nav-button").on('click',function() {
            $(".nav-button,.nav").toggleClass("open");
            });    
        });
        </script>
</head>
<body>

<button class="nav-button">Toggle Navigation</button>







<div align="center"><table cellpadding="0" width="150"  cellspacing="0"><tr>
<td></td>

<td></td>

<td></td>

<td></td>
</tr>
</table></div>




</body>
</html>

CSS - Taille réelle

 .bilder {
    position: absolute;
    top: 58px;
    left: 110px;

}




* { margin:0;
padding:0;
}

html {height: 100%;}

body{
    position: relative;
    height: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));

}

.navbox {
    position: relative;
    float: left;


}

/* Första boxarna*/
ul.nav {
    list-style: none;
    display: block;
    width: 170px;
    position: relative;
    top: :0px;
    left: 100px;
    z-index:0;
    padding: 100px 0 50px 0;
    background: url(shad2.png) no-repeat;
    -webkit-background-size: 50% 100%;
    display: list-item;

}




li {
    margin: 5px 0 0 0;
}

/* När jag drar musen över */
ul.nav li a  {
    -webkit-transition: all 0.3s ease-out;

    color: #174867;
    padding: 7px 15px 7px 15px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;

    display: block;
    text-decoration: none;
    -webkit-box-shadow: 2px 2px 4px 2px #888;
}

ul.nav li a:hover {
    background: #ebebeb url(border.png) no-repeat;
    color: #67a5cd;
    padding: 7px 15px 7px 30px;
}
ul.nav li ul { 
display:none;
}
ul.nav li:hover ul { 
display:block;
position:relative;
left:5px;top:0px;
list-style: none;
z-index:999;
}

ul.nav li ul li
{ 
background:#888;

}   

Css- Mobile

.nav-button { display: none; } /* hide the navigation button by default */

@media only screen and (min-width: 0px) and (max-width: 475px) {
.bilder { display: none;}

    /* Navigation Button
    -------------------------------------------------------- */

    .nav-button {
        display: block;
        position: relative;
        top: 2px;
        left: 7px;
        width: 50px;
        height: 35px;
        background: url('intebilder/menu-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        background: url('intebilder/menu-icon-large.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        background: url('intebilder/menu-icon-large.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        background: url('intebilder/menu-icon-large.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 21px, 100%;
        cursor: pointer;
        border: 0 none;
        border-bottom: 1px solid rgba(255,255,255,.1);
        box-shadow: 0 0 4px rgba(0,0,0,.7) inset;
        border-radius: 5px;
        z-index: 999;
        text-indent: -9999px;
    }
    .nav-button:hover { 
        background-color: rgba(0,0,0,.1); 
    }
    .nav-button.open {
        background: url('intebilder/close-icon-large.png'), -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        background: url('intebilder/close-icon-large.png'),    -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        background: url('intebilder/close-icon-large.png'),     -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        background: url('intebilder/close-icon-large.png'),      -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 21px, 100%;

    }

    /* Navigation Bar
    -------------------------------------------------------- */

    body { 
    padding-top: 10px; 

    } 

    ul.nav{
        width: 100%;
        float: none;
        background-color: #238be3; /* change the menu color */
        background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        background-image:  -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        background-image:  -ms-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        background-image:  -o-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,.2));
        display: block;
        height: 50px;
        margin: 0;
        padding: 0;
        overflow: hidden;

        position: absolute;
        top: 10px;
        left: 300px;
        z-index: 998;
        clear: both;
        list-style: none;
    }
    ul.nav li {
        display: none;
        width: 100%;
        font-family: Arial;
    }
    ul.nav li a {
        display: block;
        width: 90%;
        padding: 10px 5%;
        font-size: 14px;
        font-weight: bold;
        text-shadow: -1px -1px 0 rgba(0,0,0,.15);
        color: white;
        text-decoration: none;
        border-bottom: 1px solid rgba(0,0,0,.2);
        border-top: 1px solid rgba(255,255,255,.1); 
    }
    ul.nav li a:hover {
        background-color: rgba(0,0,0,.5);
        border-top-color: transparent;
    }
    ul.nav > li:first-child {
        border-top: 1px solid rgba(0,0,0,.2);
    }

    /* Toggle the navigation bar open  */

    ul.nav.open { 
        height: auto; 
        padding-top: 50px;
    }
    ul.nav.open li { 
        display: block; 
    }

    /* Submenus – optional .parent class indicates dropdowns */

    ul.nav > li:hover > a {
        background: rgba(0,0,0,.5);
        border-bottom-color: transparent;
    }
    ul.nav li.parent > a:after {
        content: "▼";
        color: rgba(255,255,255,.5);
        float: right;
    }
    ul.nav li.parent > a:hover {
        background: rgba(0,0,0,.75);
    }
    ul.nav li ul {
        display: none;
        background: rgba(0,0,0,.5);
        border-top: 0 none;
        padding: 0;
    }
    ul.nav li ul a {
        border: 0 none;
        font-size: 12px;
        padding: 10px 5%;
        font-weight: normal;
    }
    ul.nav li:hover ul {
        display: block;
        border-top: 0 none;
    }

} /* End Mobile Styles */
0
créer un jsFiddle
ajouté l'auteur Mohsen Safari, source
jsfiddle.net/yD7dM C'est parti!
ajouté l'auteur Rory Galloway, source

Il n'y a pas de réponses.

0