¡Buenas! ¿Cómo andan? Espero que estén muy bien 
El día de hoy les traigo un Menú/Navegación flotante fijo, este se vería así:
<style>
#blogtitle{
font-family: Monotype Corsiva;
font-size:22px;
line-height:24px;
color:#edacce;
}
div#kawaiilink1{
position:fixed;
height: 30px;
width: 30px;
top: 402px;
left: 23px;
background:#ffffff;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
opacity: 3;
-o-transition-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
#kawaiilink1:hover{
background:#ffe3f6;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
div#kawaiilink2{
position:fixed;
height: 30px;
width: 30px;
top: 402px;
left: 57px;
background:#ffffff;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
opacity: 3;
-o-transition-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
#kawaiilink2:hover{
background:#ffe3f6;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
div#kawaiilink3{
position:fixed;
height: 30px;
width: 30px;
top: 402px;
left: 90px;
background:#ffffff;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
opacity: 3;
-o-transition-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
#kawaiilink3:hover{
background:#ffe3f6;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
div#kawaiilink4{
position:fixed;
height: 30px;
width: 30px;
top: 402px;
left: 124px;
background:#ffffff;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
opacity: 3;
-o-transition-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
#kawaiilink4:hover{
background:#ffe3f6;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
div#kawaiilink5{
position:fixed;
height: 30px;
width: 30px;
top: 402px;
left: 159px;
background:#ffffff;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
opacity: 3;
-o-transition-transition: all 0.7s ease-out;
-webkit-transition: all 0.7s ease-out;
-moz-transition: all 0.7s ease-out;
transition: all 0.7s ease-out;
}
#kawaiilink5:hover{
background:#ffe3f6;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
#luv{
position:fixed;
opacity:0;
width:145px;
height:30px;
margin-top:70px;
background:White;
border:1px solid #edacce;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#sidebar:hover #luv{
opacity:1;
margin-top:98px;
-webkit-transition: all .7s ease;
-moz-transition: all .7s ease;
-o-transition: all .7s ease;
transition: all .7s ease;
}
#sidebar {
padding:10px;
text-align:center;
position:fixed;
left: 200px;
background:white;
margin-left:-180px;
margin-top:10px;
width:145px;
font-size:10px;
font-family:Tahoma ;
border:1px solid #edacce;
-webkit-border-radius: 1em;
}
#luvsideimg img {
width:100px;
height:100px;
border-radius:80px;
padding:8px;
background:white;
border:1px solid #edacce;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}
#luvsideimg img:hover {
border-radius:0px;
border:1px solid #edacce;
-moz-transition-duration:1s;
-webkit-transition-duration:1s;
-o-transition-duration:1s;
}
</style>
<div id="sidebar">
<div id="luvsideimg"><a href="/" title="it's crazy in here." class=""><img src="http://static.tumblr.com/95aa0ae4fbec18b6aca9e80964119213/tubsgh5/yApml9f3g/tumblr_static_molang_hearts.jpg" /></a></div>
<div id="blogtitle">Sweet lovely</div>
<div id="kawaiilink1"><a href="/" title="HOME"><img src="http://media.tumblr.com/552b9ea334aeb01a2665b7852ea18992/tumblr_inline_mn41t8zSVz1qz4rgp.gif" style="opacity: 1; width: 20px; height: 20px; padding: 2px; margin-top: 2px; margin-left:3px; -webkit-border-radius: 10px; background:transparent;" /></a></div>
<div id="kawaiilink2"><a href="LINK" rel="01" class="poplight" title="TITULO"><img src="http://media.tumblr.com/979c444d1099d909f523ea6c46b2a77d/tumblr_inline_mn41t5oGEF1qz4rgp.gif" style="opacity: 1; width: 20px; height: 20px; padding: 2px; margin-top:2px; margin-left:3px; background:transparent;" /></a></div>
<div id="kawaiilink3"><a href="LINK" rel="02" class="poplight" title="TITULO"><img src="http://media.tumblr.com/8a69100e3fd1e52fab8b0208b2d0b4ae/tumblr_inline_mn41t889Fn1qz4rgp.gif" style="opacity: 1; width: 20px; height: 20px; padding: 2px; margin-top:2px; margin-left:3px; background:transparent;" /></a></div>
<div id="kawaiilink4"><a href="LINK" rel="03" class="poplight" title="TITULO"><img src="http://media.tumblr.com/59eb4d44cb452aaaca285e68e4896e15/tumblr_inline_mn41t56RXl1qz4rgp.gif" style="opacity: 1; width: 20px; height: 20px; padding: 2px; margin-top:2px; margin-left:3px; background:transparent;" /></a></div>
<div id="kawaiilink5"><a href="LINK" title="TITULO"><img src="http://media.tumblr.com/f58531ca04cc3ae214a71bd4571d6bf1/tumblr_inline_mn41t6MHXW1qz4rgp.gif" style="opacity: 1; width: 20px; height: 20px; padding: 2px; margin-top:2px; margin-left:3px; background:transparent;" /></a></div>
<div id="luv"><select onchange="location=this.options[this.selectedIndex].value;" style=" font-family:latha;background-image: url('https://40.media.tumblr.com/cff2f820a6cb753e94175e969d6f7270/tumblr_inline_nov9mxfRXX1rnjuep_540.png'); border:1px solid #edacce; height:20px; font-size:10px; text-transform:uppercase; width:135px; margin-bottom:2px; -webkit-appearance: none;text-align:center;margin-top:5px;">
<option value="" />navegacion <option value="URL1" />CATEGORIA 1<option value="URL2" />CATEGORIA 2<option value="URL3" />CATEGORIA 3<option value="URL4" />CATEGORIA 4<option value="URL5" />CATEGORIA 5<option value="URL6" />CATEGORIA 6<option value="URL7" />CATEGORIA 7</select></div>
<div id="desc"><b><font color="#81BEF7">SHalalala</font></b> <br /> Hola hola !! Bienvenidos a mi blog <b><font color="#D0A9F5">kawaii</font></b>. No olvides COMENTAR Kises&hugs</div></div>
Azul: Editar a tu gusto
byebye~!
No hay comentarios:
Publicar un comentario
¡Gracias por tu comentario!
Emojis:
⸜(｡˃ ᵕ ˂ )⸝♡ | ૮ ˶ᵔ ᵕ ᵔ˶ ა | (＞▽＜) | ପ(๑•ᴗ•๑)ଓ ♡ | (╯ω╰) | (☆▽☆) | (≧ω≦) | ૮ • ﻌ - ა | ଘ(੭ˊᵕˋ)੭ | (・∀・ ) | (¬_¬) | (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ | ฅ^•ﻌ•^ฅ | (¬‿¬) | (─‿‿─) | (~￣▽￣)~ | (︶ω︶) | ٩(ˊᗜˋ*)و ♡ | (╥﹏╥) | (✿ ♥‿♥) | ●ᴥ●
Simbolos:
♡♥♫△☆ღ