Fast navbar

position: fixed;
position: fixed;
z-index:+1;
display: inline-table;


ff

 

ruland kodmall

<div id="flip"></div>
<div id="panel"><div id="panel-inner">
<div id="panel-items" class="clearfix" style="display: block;">
<div id="latest-posts">
<div class="navmenyhead">Senaste inläggen</div><ul>
{% for entry in entries[:23] %}
<li><a href="{{ entry.url }}">{{ entry.title }}</a></li>
{% endfor %}
</ul></div>

<div id="archive">
<div class="navmenyhead">Arkiv</div>
<ul>
<div class="navmenytext"><center>
<b>2010</b>
<br />
Januari - Februari - Mars - April - Maj - Juni - Juli - Augusti - <a href="http://hannalovisasol.se/2010/september/">September</a> - <a href="http://hannalovisasol.se/2010/october/">Oktober</a> - <a href="http://hannalovisasol.se/2010/november/">November</a> - <a href="http://hannalovisasol.se/2010/december/">December</a></br>
</br><br />
<b>2011</b>
<br />
<a href="http://hannalovisasol.se/2011/january/">Januari</a> - <a href="http://hannalovisasol.se/2011/february/">Februari</a> - <a href="http://hannalovisasol.se/2011/march/">Mars</a> - <a href="http://hannalovisasol.se/2011/april/">April</a> - <a href="http://hannalovisasol.se/2011/may/">Maj</a> - <a href="http://hannalovisasol.se/2011/june/">Juni</a> - <a href="http://hannalovisasol.se/2011/july/">Juli</a> - <a href="http://hannalovisasol.se/2011/august/">Augusti</a> - <a href="http://hannalovisasol.se/2011/september/">September</a> - <a href="http://hannalovisasol.se/2011/october/">Oktober</a> - <a href="http://hannalovisasol.se/2011/november/">November</a> - <a href="http://hannalovisasol.se/2011/december/">December</a></br>
</br><br />
<b>2012</b>
<br />
<a href="http://hannalovisasol.se/2012/january/">Januari</a> - <a href="http://hannalovisasol.se/2012/february/">Februari</a> - <a href="http://hannalovisasol.se/2012/march/">Mars</a> - <a href="http://hannalovisasol.se/2012/april/">April</a> - <a href="http://hannalovisasol.se/2012/may/">Maj</a> - <a href="http://hannalovisasol.se/2012/june/">Juni</a> - <a href="http://hannalovisasol.se/2012/july/">Juli</a> - <a href="http://hannalovisasol.se/2012/august/">Augusti</a> - <a href="http://hannalovisasol.se/2012/september/">September</a> - <a href="http://hannalovisasol.se/2012/october/">Oktober</a> - <a href="http://hannalovisasol.se/2012/november/">November</a> - <a href="http://hannalovisasol.se/2012/december/">December</a><br /> <br />
<b>2013</b>
<br />
<a href="http://hannalovisasol.se/2013/january/">Januari</a> - <a href="http://hannalovisasol.se/2013/february/">Februari</a> - <a href="http://hannalovisasol.se/2013/march/"> Mars</a> - <a href="http://hannalovisasol.se/2013/april/">April</a> - Maj - Juni - Juli - Augusti - September - Oktober - November - December </center>
</ul></div>


<div id="categories">
<div class="navmenyhead">Kategorier</div>
<ul>
<center>{% for category in categories %}
<li><a href="{{ category.url }}">{{ category.name }}</a></li>
{% endfor %}
</center>
</ul>
</div><!-- menu-items --></div><!-- #menu-inner --></div><!-- #menu -->
</div>


rulladn stilmall

#flip{
background: url(https://cdn3.cdnme.se/2965105/7-3/panel1_514adf819606ee2083ca9ef8.png);
background-repeat: no-repeat;
background-position: center;
width: 1050px;
height: 70px;
margin-bottom: 0px;
}

#panel,#flip{
text-align:center;
width: 1050px;
height: 70px;
margin-bottom: 0px;
}

#panel
{
padding:50px;
height: 370px;
display:none;
font-family: 'Lucida Sans Unicode', Verdana, Arial, Sans-Serif;
font-size: 13px;
font-weight: normal;
color: #000000;
line-height: 150%;
margin: 0px 0px 0px;
padding: 0px;
line-height: 90%;
background: url(http://img26.imageshack.us/img26/7352/panel2d.png);
background-repeat: no-repeat;
background-position: top center;
}

.ie7 #menu {
position: static;
}

#panel-inner {
width: 1050px;
height: 300px;
margin: 0px;
padding: 0px 0;
position: relative;
}

#panel-items>div {
float: left;
height: 300px;
width: 330px;
margin: 5 5 5 5px;
text-align: center;
}

#panel-inner a:hover {
color: #FFF;
}

#panel-inner ul {
list-style: none;
}

#panel-inner li {
margin-bottom: 5px;
font-weight: 400;
text-align: center;
}

#panel-inner h4.navheader {
color: #000;
font-size: 15px;
margin-bottom: 5px;
}

#panel-items {
padding: 5px 0;
margin-left: 5px;
}

#panel-inner #panel-button{
position: absolute;
right: 0;
bottom: 0px;
margin: 3 3 3 3px;
padding: 5px 5px;
width: 350px;
height: 340px;
text-align: center;
font-weight: 400;
}

#navbar { margin: 0; padding-left: 307px; height: 1em; }

#navbar li { list-style: none; float: left; } /* Ändra till right om du vill ha menyn till höger istället*/

#navbar li a {
display: block; padding-left:20px; padding-right:20px; padding-top:5px; padding-bottom:5px; border-left: 0px solid #ffffff; border-bottom: 1px dotted #8abbd6; background-color: #; /*Ändra färgen på menyflikarna här*/ color: #000000; /*Ändra färgen på texten här*/ text-decoration: none; font-family: raleway; /*Ändra typsnittet här*/ font-size: 20px; text-shadow: 0 0 5px #000; font-weight: bold;
} /*Ändra storleken på texten här*/

#navbar li ul { display: none; width: 15em; /* Ändra bredden på undermenyn här */ background-color: #ffffff; font-size: 11px;
/*opacitet for IE */ filter:alpha(opacity=70); /* opacity: 0.70; filter:alpha(opacity=70); */ /* opacitet CSS3 standard */ opacity:0.70; /*opacitet for Mozilla */ -moz-opacity:0.70; }

#navbar li:hover ul,

#navbar li.hover ul { display: block; position: absolute; margin: 0; padding: 0; z-index: 1; }

#navbar li:hover li,

#navbar li.hover li { float: none; }

#navbar li:hover li a,

#navbar li.hover li a { background-color: #ffffff;
border-bottom: 1px dotted #8abbd6; border-left: 0px solid #8abbd6;
border-right: 0px solid #cccccc;
text-shadow: 0 0 0px #000;
color: #000;
font-family: verdana;
font-weight: normal;
font-size: 12px;
/*opacitet for IE */ filter:alpha(opacity=70); /* opacity: 0.70; filter:alpha(opacity=70); */ /* opacitet CSS3 standard */ opacity:0.70; /*opacitet for Mozilla */ -moz-opacity:0.70; }

#navbar li li a:hover { color: #; background-color: #d9e4ea;} /*Ändra färgen när man håller musen över undermenyn*/


fin meny css

#slidemenubar, #slidemenubar2{
position:absolute;
background: url(https://cdn1.cdnme.se/2965105/7-3/slide_514ad900e087c313555904c7.png);
background-repeat: no-repeat;
layer-background-color:#000000;
font-family: 'Lucida Sans Unicode', arial, sans-serif;
font-size: 13px;
font-weight: normal;
text-align:left;
color: #000;
line-height: 115%;
padding: 0px 0px 73px 0px;
}


fin meny script

<script language="JavaScript1.2">

/***********************************************
* Sliding Menu Bar Script- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
***********************************************/
var slidemenu_width='197px' //specify width of menu (in pixels)
var slidemenu_height='509px'
var slidemenu_reveal='45px' //specify amount that menu should protrude initially
var slidemenu_top='170px' //specify vertical offset of menu on page

var ns4=document.layers?1:0
var ie4=document.all
var ns6=document.getElementById&&!document.all?1:0

if (ie4||ns6)
document.write('<div id="slidemenubar2" style="left:'+((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)+'px; top:'+slidemenu_top+'; width:'+slidemenu_width+'" onMouseover="pull()" onMouseout="draw()">')
else if (ns4){
document.write('<style>\n#slidemenubar{\nwidth:'+slidemenu_width+';}\n<\/style>\n')
document.write('<layer id="slidemenubar" left=0 top='+slidemenu_top+' width='+slidemenu_width+' onMouseover="pull()" onMouseout="draw()" visibility=hide>')
}

var sitems=new Array()

///////////Edit below/////////////////////////////////

//siteitems[x]=["Item Text", "Optional URL associated with text"]

sitems[0]=["<h3>Kategorier</h3>", ""]
sitems[1]=["• Bilder på mig", "http://hannalovisasol.se/category/bilder-pa-mig.html"]
sitems[2]=["• Design", "http://hannalovisasol.se/category/design.html"]
sitems[3]=["• Film&TV", "http://hannalovisasol.se/category/film.html"]
sitems[4]=["• Foto", "http://hannalovisasol.se/category/foto.html"]
sitems[5]=["• Frukost&Mellanmål", "http://hannalovisasol.se/category/frukostmellanmal.html"]
sitems[6]=["• Balsammetoden", "http://hannalovisasol.se/category/balsammetoden.html"]
sitems[7]=["• Frågor&Svar", "http://hannalovisasol.se/category/fragor-svar.html"]
sitems[8]=["• Hästar&Ridning", "http://hannalovisasol.se/category/hastar-ridning.html"]
sitems[9]=["• Idolbilder", "http://hannalovisasol.se/category/idolbilder.html"]
sitems[10]=["• Julkalendrar", "http://hannalovisasol.se/category/julkalendrar.html"]
sitems[11]=["• Mat", "http://hannalovisasol.se/category/mat.html"]
sitems[12]=["• Naglar", "http://hannalovisasol.se/category/naglar.html"]
sitems[13]=["• Outfits", "http://hannalovisasol.se/category/outfits.html"]
sitems[14]=["• Photoshop", "http://hannalovisasol.se/category/photoshop.html"]
sitems[15]=["• Citat", "http://hannalovisasol.se/category/quotes.html"]
sitems[16]=["• Recept", "http://hannalovisasol.se/category/recept.html"]
sitems[17]=["• Ritat", "http://hannalovisasol.se/category/ritat.html"]
sitems[18]=["• Shopping", "http://hannalovisasol.se/category/shopping-klader.html"]
sitems[19]=["• Tips&Tricks", "http://hannalovisasol.se/category/tips-tricks.html"]
sitems[20]=["• Träning&Hälsa", "http://hannalovisasol.se/category/traning-halsa.html"]
sitems[21]=["• Tävlingar", "http://hannalovisasol.se/category/tavlingar.html"]
sitems[22]=["• Utmaningar", "http://hannalovisasol.se/category/utmaningar.html"]
sitems[23]=["• Vardagligheter", "http://hannalovisasol.se/category/vardagligheter.html"]
sitems[24]=["• Veckans/dagensblogg", "http://hannalovisasol.se/category/veckansdagens-blogg.html"]
sitems[25]=["• Videoinlägg", "http://hannalovisasol.se/category/videoinlagg.html"]

//If you want the links to load in another frame/window, specify name of target (ie: target="_new")
var target=""

/////////////////////////////////////////////////////////

if (ie4||ns4||ns6){
for (i=0;i<sitems.length;i++){
if (sitems[i][1])
document.write('<a href="'+sitems[i][1]+'" target="'+target+'">')
document.write(sitems[i][0])
if (sitems[i][1])
document.write('</a>')
document.write('<br>\n')
}
}

function regenerate(){
window.location.reload()
}
function regenerate2(){
if (ns4){
document.slidemenubar.left=((parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1)
document.slidemenubar.visibility="show"
setTimeout("window.onresize=regenerate",400)
}
}
window.onload=regenerate2

rightboundary=0
leftboundary=(parseInt(slidemenu_width)-parseInt(slidemenu_reveal))*-1

if (ie4||ns6){
document.write('</div>')
themenu=(ns6)? document.getElementById("slidemenubar2").style : document.all.slidemenubar2.style
}
else if (ns4){
document.write('</layer>')
themenu=document.layers.slidemenubar
}

function pull(){
if (window.drawit)
clearInterval(drawit)
pullit=setInterval("pullengine()",10)
}
function draw(){
clearInterval(pullit)
drawit=setInterval("drawengine()",10)
}
function pullengine(){
if ((ie4||ns6)&&parseInt(themenu.left)<rightboundary)
themenu.left=parseInt(themenu.left)+10+"px"
else if(ns4&&themenu.left<rightboundary)
themenu.left+=10
else if (window.pullit){
themenu.left=0
clearInterval(pullit)
}
}

function drawengine(){
if ((ie4||ns6)&&parseInt(themenu.left)>leftboundary)
themenu.left=parseInt(themenu.left)-10+"px"
else if(ns4&&themenu.left>leftboundary)
themenu.left-=10
else if (window.drawit){
themenu.left=leftboundary
clearInterval(drawit)
}
}
</script>


nima


amte


snabbis

testar
 

Välkommen till min nya blogg!

Hej och välkommen till min blogg. Jag heter Hanna. Fin text.

Denhär ska vara kursiverad.