मेनू स्क्रीन के बीच में इच्छित, पृष्ठभूमि, मेनू के रूप में काम नहीं करता है

वर्तमान में छोटे संकल्प, आईई मोबाइल उपकरणों और ऐसे के लिए मेनू को कॉन्फ़िगर करने का प्रयास कर रहा है।

समस्या जो मैं वर्तमान में कर रहा हूं, पूर्ण आकार में मेनू से पृष्ठभूमि, पृष्ठभूमि: url (shad2.png) छोटे संस्करण पर भी दिखा रहा है, और मुझे इसे हटाने का कोई तरीका नहीं दिख रहा है।

मेरा दूसरा सवाल है। मैं अपने मेनू के लिए "पॉप-आउट" विंडो कैसे बना सकता हूं + इस मेनू के समान दिखने वाला http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/#nav विंडो को नीचे स्केल करें और आपको FEEL मिल जाएगा ! मैं चाहता हूं कि मेरे मेनू में एक ही अनुभव हो, लेकिन मेरे रंगों और ऐसे! अभी कारण है कि मेनू मेनू के नीचे सीधे मेरे मेनू स्क्रीन के बीच में पॉप आउट हो जाता है! धन्यवाद

Jsfiddle http://jsfiddle.net/yD7dM/

मेरा वर्तमान कोड यहां है:


<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>

सीएसएस - पूर्ण आकार

 .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;

}   

सीएसएस- मोबाइल

.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
जोड़ा संपादित
विचारों: 1
एक jsFiddle बनाएं
जोड़ा लेखक Mohsen Safari, स्रोत
jsfiddle.net/yD7dM वहां हम जाते हैं!
जोड़ा लेखक Rory Galloway, स्रोत

कोई जवाब नहीं है

0