Ho creato un menu responsive ho i seguenti problemi:
-il menu a tendina resta sempre aperto a risoluzione basse 320px invece dovrei aprirlo schiacciando il bottone del menu
-se apro il sito con firefox lo sfondo viola si restringe lasciando il tasto senza per meta
-quando apro il sito mi fa vedere il menu anche se nelle medie query non ho settato nulla
http://giuliano75.altervista.org/
grazie per l aiuto
il problema piu grosso e che il menu slide down resta aperto e a altre risoluzioni non chiudendosi mostra il menu no so se dipende dallo script javascript
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Responsive Menu animato con effetto Slide Down</title>
<!-- Mobile viewport optimized: j.mp/bplateviewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>sito giuliano</title>
<!-- Style -->
<link rel="stylesheet" type="text/css" href="css/master.css">
<link rel="stylesheet" type="text/css" href="font/style.css">
<!--script js-->
<script type="text/javascript" src="js/modernizr-2.0.6.min.js"></script>
<!--fine js-->
</head>
<body>
<div id="contenitore">
<div class="btn-responsive-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<!--inizio header-->
<header>
<!--inizio navigazio-->
<nav>
<ul id="mainmenu">
<li id="home" ><a href="#"><span class="icon"><i aria-hidden="true" class="icon-home"></i></span><span>HOME</span></a></li>
<li ><a href="#"><span class="icon"><i aria-hidden="true" class="icon-user"></i></span><span>ABOUT</span></a></li>
<li ><a href="#"><span class="icon"><i aria-hidden="true" class="icon-quill"></i></span><span>WORKS</span></a></li>
<li ><a href="#"><span class="icon"><i aria-hidden="true" class="icon-mobile"></i></span><span>CONTACT</span></a></li>
</ul>
</nav>
<!--fine navigazio-->
</header>
<!--fine header-->
</div>
<!-- Librerie JavaScript -->
<!--[if (lt IE 9) & (!IEMobile)]>
<script src="js/respond.min.js"></script>
<![endif]-->
<!-- Carica jQuery dal CDN di Google, carica una versione locale della libreria se necessario -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.0.min.js"><\/script>')</script>
<script>
$(document).ready(function(){
//When btn is clicked
$(".btn-responsive-menu").click(function() {
$("#mainmenu").slideToggle('fast', function() {});
});
});
</script>
</body>
</html>
/* == Stili di base - Mobile first ===== */
.icon-home, .icon-quill, .icon-user, .icon-html5, .icon-css3, .icon-google, .icon-twitter, .icon-facebook, .icon-mobile{
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
body{
font-family: 'helvetica_neueregular', Optima-Regular, Verdana, sans-serif;
font-size: 100%/1,3;
color: #222;
background-color: #FFFFFF;
margin: 0;
padding: 0;
}
#contenitore
{
width:100%;
background-color:#a66bbe;
}
header{
width:95%;
margin:auto;
overflow:hidden;
margin:auto;
}
/* Button Responsive Menu*/
.btn-responsive-menu{
display: block;
float: right;
padding: 5px;
cursor: pointer;
margin-top:1em;
margin-right: 1.5em;
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background: #333;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.icon-bar{
display: block;width: 18px;height: 2px;margin:5px;background-color: #f5f5f5;-webkit-border-radius: 1px;-moz-border-radius: 1px;border-radius: 1px;-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
nav{
width:100%;
margin-top:2em;
margin-bottom:1.5em;
}
nav ul{
margin:0;
padding:0;
list-style:none;
}
nav ul li {
position: relative;
width:100%;
height: 1.8em;
border-top: 1px solid #D1D3D4;
border-left: 1px solid #D1D3D4;
border-right: 1px solid #D1D3D4;
}
nav ul li:last-child {
border-bottom: 1px solid #D1D3D4;
}
nav ul li a {
display: block;
color: #333;
line-height: 1.8;
text-decoration: none;
width: 100%;
height: 1.8em;
padding-left: 4%;
}
nav ul li a:hover, #home a
{
color:#FFFFFF;
}
/* == Media queries (breakpoint) ===== */
/* -----------------------------------
IPAD PORTRAIT
------------------------------------ */
@media only screen and (min-width: 768px) {
.btn-responsive-menu{
display:none;
}
}
/* -----------------------------------
IPAD LANDSCAPE + NETBOOK
------------------------------------ */
@media only screen and (min-width: 1024px){
.btn-responsive-menu{
display:none;
}
}
/* -----------------------------------
DESKTOP
------------------------------------ */
@media only screen and (min-width: 1200px){
.btn-responsive-menu{
display:none;
}
}
ho visto che su il mio windows phone non si vede
Permessi di invio
Rispondi quotando