Statyczne menu

Menu statyczne które na scrolowanej stronie podąża za nami w górę i dół.
Fajna sprawa jeżeli nasza strona jest obszerna i rozbudowana to przeglądający ją zawsze ma szybki dostęp do menu

zawartość HEAD którą można rozbić na pliki .css i .js

<style type="text/css">

.wireframemenu{
border: 1px solid #C0C0C0;
background-color: white;
border-bottom-width: 0;
width: 170px;
position: absolute;
}

* html .wireframemenu{ /*IE only rule. Original menu width minus all left/right paddings */
width: 164px;
}

.wireframemenu ul{
padding: 0;
margin: 0;
list-style-type: none;
}

.wireframemenu a{
font: bold 13px Verdana;
padding: 4px 3px;
display: block;
width: 100%; /*Define width for IE6's sake*/
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}

.wireframemenu a:visited{
color: #595959;
}

html>body .wireframemenu a{ /*Non IE rule*/
width: auto;
}

.wireframemenu a:hover{
background-color: #F8FBBD;
color: black;
}

</style>

<script type="text/javascript">

var staticmenuids=["staticmenu"]

var staticmenuoffsetY=[]

function getmenuoffsetY(){
for (var i=0; i<staticmenuids.length; i++){
var currentmenu=document.getElementById(staticmenuids[i])
staticmenuoffsetY.push(isNaN(parseInt(currentmenu.style.top))? 0 : parseInt(currentmenu.style.top))
}
initstaticmenu()
}

function initstaticmenu(){
var iebody=(document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
var topcorner=(window.pageYOffset)? window.pageYOffset : iebody.scrollTop
for (var i=0; i<staticmenuids.length; i++)
document.getElementById(staticmenuids[i]).style.top=topcorner+staticmenuoffsetY[i]+"px"
setTimeout("initstaticmenu()", 100)
}

if (window.addEventListener)
window.addEventListener("load", getmenuoffsetY, false)
else if (window.attachEvent)
window.attachEvent("onload", getmenuoffsetY)

</script>

zawartość BODY:

<div id="staticmenu" class="wireframemenu" style="left: 10px; top: 20px">
<ul>
<li><a href="http://www.adreslinka">adreslinka</a></li>
<li><a href="http://www.adreslinka">adreslinka</a></li>
<li><a href="http://www.adreslinka">adreslinka</a></li>
<li><a href="http://www.adreslinka">adreslinka</a></li>
<li><a href="http://www.adreslinka">adreslinka</a></li>
<li><a href="http://www.adreslinka">adreslinka</a></li>
</ul>
</div>

 

Popularne Artykuly

Najnowsze Artykuły