HTML / CSS / JQUERY ??? - Fixed position på ipad / iphone.
Hey Eksperter ! Jeg sidder og er igang med at lave noget hjemmeside i forbindelse med en eksamen.Men jeg er rendt ind i et lille problem som jeg håber nogen af jer kan være behjælpelige med ?
Problemet er at jeg er ved at gøre site "ipad/iphone"-venligt (pt. er jeg kun igang med ipad-delen) - og på mit site har jeg en fixed-positioneret menu - og denne vil jeg gerne kunne have "overført" så at sige til ipad versionen. Meeen .. menu'en (som er bygget op sådan her div>ul>li>a) positionerer sig rigtig og fungerer ved første klik (den benytter #-hashtags - så man bliver på siden) men lige så snart den har været 'aktiveret' en gang fungerer den ikke længere før man scroller helt til toppen igen.
Nogen der kan give mig en hånd med den her ? - Min egen research har ført mig til at det vidst kun kan fixes med javascript / jquery .. ??
I får lige lidt kode snas så I kan danne jer et bedre overblik :)
HTML:
<div class="navbox">
<ul class="nav">
<li><a href="#intro">Velkommen til!</a></li>
<li><a href="#second">En verden af mælk</a></li>
<li><a href="#third">Din fremtid</a></li>
<li><a href="#fourth">Fourth</a></li>
<li><a href="#fifth">Fifth</a></li>
</ul>
</div>
CSS:
.navbox {
text-align:center;
width:100%;
margin: -16px auto;
}
ul.nav {
padding:0;
width:100%;
text-align:center;
list-style: none;
display: block;
position: fixed;
z-index: 1000;
}
li {
margin: 0px 0 0 0;
width: 20%;
display:inline;
float:left;
}
ul.nav li a.active {
background: #ebebeb;
color: #67a5cd;
}
ul.nav li a {
background: white;
height: 60px;
color: #174867;
width: 98%;
display: block;
text-decoration: none;
text-align: center;
margin: auto;
font-size: 120%;
line-height: 60px;
}
Som i kan se er det ul.nav der er fixed positioneret.
Jeg håber der sidder nogle kloge hoveder derude der kan hjælpe mig ! :)
På forhånd tak.
