目前正在尝试配置较小分辨率的菜单，I.E移动设备等。
我目前遇到的问题是，全尺寸菜单的背景，背景：url（shad2.png）在较小的版本上显示，我似乎无法找到一种删除它的方法。
我的第二个问题是。如何创建＆＃34;弹出＆＃34;我的菜单的窗口+与此菜单相同的外观http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/#nav SCALE THE WINDOW DOWN你将获得感受！我希望我的菜单有相同的感觉，但我的颜色等等！因为现在我的菜单在屏幕中间弹出，而不是直接在菜单按钮下面！感谢
Jsfiddle http://jsfiddle.net/yD7dM/
这是我目前的代码：
<html xmlns="http://www.w3.org/1999/xhtml"xml:lang="sv">
<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>
<ul class="nav">
<li><a href="#">Program</a>
<ul>
<li><a href="#">Teknik</a></li>
<li><a href="#">Naturvetenskap</a></li>
<li><a href="#">El</a></li>
</ul></li>
<li><a href="#">Nösnäs</a></li>
<li><a href="#">Schema</a></li>
<li><a href="#">Matsal</a></li>
</ul>
<style>.xg_module_body img {margin:0!important;}</style>
<span class="bilder">
<div align="center"><table cellpadding="0" width="150" cellspacing="0"><tr>
<td><a href="#" target="_blank"><img src="facebookpic.png" title="Gilla våran Facebook sida" width="35" height="35" border="0"></a></td>
<td><a href="#"target="_blank"><img src="googlepic.png" title="Gilla oss på googlde+" width="35" height="35" border="0"></a></td>
<td><a href="#" target="_blank"><img src="twitterpic.png" title="Följ oss på Twitter" width="35" height="35" border="0"></a></td>
<td><a href="#" target=""><img src="rsspic.png" width="35" height="35" border="0" title="Följ våran RSS"></a></td>
</tr>
</table></div>
</span>
</body>
</html>
CSS - 全尺寸
.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 */