SANNAS RUM -

Stor slidedown (meny som täcker hela ovansidan av bloggen och slidear ner)

Stilmallskod:

/*Clearfix - Ã¤ndra ej*/
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}

html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}

#box-slidedown {
text-align: center;
font-size: 11px;
position:fixed;
left:5px;
top:-190px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
z-index:999;
}

#box-slidedown:hover {
top:0px;
}

#header-slidedown {
border-bottom:1px #b5b5b5 solid;
text-align: center;
font-size: 11px;
position:fixed;
left:10px;
top:-58px;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
background-color:#eee;
z-index:999;
}

#header-slidedown:hover {
top:0px;
}

#title-slidedown {
font-size:10px;
text-transform:normal;
font-family:calibri;
letter-spacing:1px;
border-width:1px;
border-color:#b5b5b5;
text-align: center;
height:8px;
padding: 5px 0 8px 0;
background:#eee;
width: 70px;
}

#text-slidedown {
font-family:calibri;
font-size:10px;
text-transform:normal;
letter-spacing:1px;
border-right-style:dashed;
border-left-style:dashed;
border-width:1px;
border-color:#b5b5b5;
padding: 2px 0 5px 0;
background: #fff;
width:160px;
height:100px;
z-index: 9999;
}

#slidedown {
text-align: left;
font-size: 9px;
position: fixed;
font-family: verdana;
left: 0px;
width: 100%;
top:-200px;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
-o-transition: all .6s ease-in-out;z-index:999;
}

#image {
padding: 0px 0px 0px 0px;
background: url();
width: 100%;
z-index: ;
}

#slidedown:hover {
top:0px;
text-align: left;
}

#slidedown a { color: #a0a0a0; text-decoration: none;}
#slidedown a:hover{color: #e1e1e1; text-decoration:none;
}

#slidedowntab {
font-family:century gothic;
width: 100%;
text-align: left;
height: 200px;
margin-left: 50px;
background: url(länktillmenybildhär) no-repeat;
}

#menu {
	background: #f5f5f5;
	width: 100%;
	color: #999;
border-bottom: 4px solid #fff;
margin-top: -24px;
	-webkit-box-shadow: 0px 5px 3px -3px rgba(90, 90, 90, 0.3);
	box-shadow: 0px 5px 3px -3px rgba(90, 90, 90, 0.3);
}

.ie7 #menu {
	position: static;
}

#menu-inner {
	width: 1200px;
	margin: 0 auto;
	padding: 0px 0;
 	position: relative;	
}

#menu-items>div {
	float: left;
	width: 150px;
	margin-right: 70px;
 
}

#menu-inner a:hover {
	color: #a0a0a0;
text-align: left;

}

#menu-inner ul {
	list-style: none;
text-align: left;

}

#menu-inner li {
font-family: calibri, sans-serif;
 text-transform: normal;
	margin-bottom: 0px;
	font-weight: 400;
	font-size: 11px;

}

#menu-inner h4.navheader {
	color: #8b8b8b;
text-align: left;
border-bottom: 0px dashed #eee;
font-family: caviar dreams, sans-serif;
	font-size: 16px;
	margin-bottom: 5px;
 margin-left: 40px;
font-weight: 300;

}

#menu-items {
	padding: 20px 0;
	margin-left: 30px;

}

#menu-inner #menu-button {
	position: absolute;
	right: 0;
	bottom: 0px;
	background: none;
	margin-right: 0;	
	padding: 0px 0px;
	width: 490px;
	border-radius: 0 0 3px 3px;
	cursor: pointer;
	text-align: left;
	-webkit-box-shadow: 0px 5px 10px -3px rgba(80, 80, 80, 0.1);
	box-shadow: 0px 5px 10px -3px rgba(80, 80, 80, 0.1);
	font-weight: 400;
}

Kodmallskod (lägg efter div id="wrapper")

<div id="latest-posts">
				<h4 class="navheader">ÖVERSKRIFT 1</h4>
				<ul>
 
<li> <a href="länktillunderkategori1">Underkategori 1</a></li>
 <li> <a href="länktillunderkategori2">Underkategori 2</a></li>
 <li> <a href="länktillunderkategori3">Underkategori 3</a></li>
 <li> <a href="länktillunderkategori4">Underkategori 4</a></li>
 <li> <a href="länktillunderkategori5">Underkategori 5</a></li>
 <li> <a href="länktillunderkategori6">Underkategori 6</a></li>
 
 
 </ul>
			</div>

<div id="latest-posts">
				<h4 class="navheader">ÖVERSKRIFT 2</h4>
				<ul>
 
 <li> <a href="länktillunderkategori1">Underkategori 1</a></li>
 <li> <a href="länktillunderkategori2">Underkategori 2</a></li>
 <li> <a href="länktillunderkategori3">Underkategori 3</a></li>
 <li> <a href="länktillunderkategori4">Underkategori 4</a></li>
 <li> <a href="länktillunderkategori5">Underkategori 5</a></li>
 
 
 </ul>
			</div>

<div id="categories">
 				<h4 class="navheader">ÖVERSKRIFT 3</h4>
 				<ul>
 <li> <a href="länktillunderkategori1">Underkategori 1</a></li>
 <li> <a href="länktillunderkategori2">Underkategori 2</a></li>
 <li> <a href="länktillunderkategori3">Underkategori 3</a></li>
 <li> <a href="länktillunderkategori4">Underkategori 4</a></li>
 <li> <a href="länktillunderkategori5">Underkategori 5</a></li>

</ul> 
 			</div>

<div id="latest-posts">
				<h4 class="navheader">ÖVERSKRIFT 4</h4>
				<ul>

<li> <a href="länktillunderkategori1">Underkategori 1</a></li>
 <li> <a href="länktillunderkategori2">Underkategori 2</a></li>
 <li> <a href="länktillunderkategori3">Underkategori 3</a></li>
 <li> <a href="länktillunderkategori4">Underkategori 4</a></li>
 <li> <a href="länktillunderkategori5">Underkategori 5</a></li>

</ul>
			</div>

<div id="latest-posts">
				<h4 class="navheader">ÖVERSKRIFT 5</h4>
				<ul>
 
<li> <a href="länktillunderkategori1">Underkategori 1</a></li>
 <li> <a href="länktillunderkategori2">Underkategori 2</a></li>
 <li> <a href="länktillunderkategori3">Underkategori 3</a></li>
 <li> <a href="länktillunderkategori4">Underkategori 4</a></li>
 <li> <a href="länktillunderkategori5">Underkategori 5</a></li>
 
 
 
 
 </ul>
			</div>

</div>
	</div>
</div>

</div></div>

<div id="slidedowntab">MENYBILDENHAMNARHÄR(tabortdennatext)</div>

</div>

För mer tips och tricks samt för att kopiera koderna, gå in på http://sannasrum.blogg.se/bloggtips

2013-07-21 @ 21:37:21 allmänt Permalink

Kommentarer

Postat av: Karins Rum

Så underbart, tack för att du gjorde denna video! Kram

Svar: Inga problem :D

sannas rum

2013-07-21 @ 21:51:19
URL: http://www.karinsrum.blo.gg

Postat av: MICHELLE R - 15åring med Spastisk Diplegi

Grymt tips, verkligen användbart! :D Håller just nu på att lägga in denna meny på min blogg.

Förstod väldigt snabbt vad alla koderna var till osv.

Svar: Vad härligt :) Hoppas att det blir bra!

sannas rum

2013-07-22 @ 15:14:37
URL: http://michilitemichelle.webblogg.se

Trackback

SANNAS RUM

Bloggdesign, foto, livsstil & photoshop.

Stor slidedown (meny som täcker hela ovansidan av bloggen och slidear ner)