#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Agrandar imágen al pasar el cursor
Publicaciones populares para blogger
Herramienta web de creacion de carteles
Las torturas de la edad media
La Santa Inquisición
Edificios de Madrid con leyendas de fantasmas
Blog en blanco para blogger
Manual Pixlr Editor ( Paso a Paso)
Modificando link de entradas antiguas y recientes
Paginar nuestro blog paso a paso
Tablas o pestañas para tu blog
Calendario que muestra los post publicados

Menu CSS

Hoy vamos a mostraros un menú Css para incluir en nuestro blog.
Para ello usamos primero el Código CSS que vemos a continuación .en 
Nos dirigimos a nuestra plantilla y en Tema > Personalizar 
Añadir CSS pegamos el siguiente código.



CSS

 #cssmenu { width:auto; display:block; text-align:center; font-family:Oswald; line-height:1.2; } #cssmenu ul { width:auto; display:block; font-size:0; text-align:center; color:#EEEEEE; background-color: #333333; border: transparent; margin:0; padding:0; list-style:none; position:relative; z-index:999999990; border-radius: 3px; } #cssmenu li { display:inline-block; position:relative; font-size:0; margin:0; padding:0; } /*Top level items ---------------------------------------*/ #cssmenu >ul>li>span, #cssmenu >ul>li>a { font-size:22px; color:inherit; text-decoration:none; padding:14px 20px; font-weight:400; text-transform:uppercase; letter-spacing:2px; display:block; position:relative; transition:all 0.3s; } #cssmenu li:hover > span, #cssmenu li:hover > a { color:#333333; background-color:#F3F3F3; } /*Sub level items ---------------------------------------*/ #cssmenu .dropdown { text-align:left; left:0; font-family:Helvetica, Arial, sans-serif; color: #333333; background-color:#F3F3F3; border:none; position:absolute; box-shadow: 0 4px 8px rgba(0,0,0,0.3); display:none; opacity:0; cursor:default; } #cssmenu .dropdown li { display: block; } #cssmenu .dropdown li > span, #cssmenu .dropdown li > a, #cssmenu .clm a, #cssmenu .clm h3 { font-size:14px; font-weight:400; font-family:inherit; margin:0; padding:8px 20px; display:block; color:inherit; text-decoration:none; } #cssmenu .clm h3 { font-size:20px; font-weight:700; } #cssmenu .sub-item { background-color:#F3F3F3; position:relative; transition:all 0.3s; } #cssmenu .dropdown li:hover > span, #cssmenu .dropdown li:hover > a { color:#333333; background-color:#DDDDDD; } #cssmenu .clm a:hover { color:#333333; transition:color 0.2s; } #cssmenu .dropdown.right0 {left:auto;right:0;} #cssmenu .dropdown li > .dropdown.right0 {left:auto;right:100%;} #cssmenu li.full-width{ position:static; } #cssmenu li.full-width .dropdown{ width:100%; left:0; box-sizing:border-box; } #cssmenu li:hover > .dropdown { display:block; opacity:1; z-index:1; } #cssmenu .dropdown li > .dropdown { left:100%; right:auto; top:0; } #cssmenu ul.dropdown { min-width:240px; /* Sub level menu min width */ } #cssmenu div.dropdown { text-align:center; } /* each column */ #cssmenu .clm { text-align:left; margin:20px; vertical-align:top;/*or middle*/ width:auto; min-width:240px; display:inline-block; *display:inline;*zoom:1; } #cssmenu .clm a:hover { color:#333333; text-decoration:underline; } /*-----------Arrows----------------*/ #cssmenu .arrow { color:inherit; border-style:solid; border-width:2px 2px 0 0; padding:4px; transform:rotate(135deg);margin-top:-8.5px;margin-left:4px; position:relative; display: inline-block; width: 0; height: 0; vertical-align:middle; overflow:hidden;/*for IE6*/ } #cssmenu .dropdown .arrow { transform:rotate(45deg); top:50%;margin-top:-6px; position:absolute;left:auto;right:20px; } @keyframes topItemAnimation { from {opacity: 0; transform:translate3d(0, -60px, 0);} to {opacity: 1; transform:translate3d(0, 0, 0);} } #cssmenu li a {animation:none;} #cssmenu.active li a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.08333333333333333s backwards;} #cssmenu.active li:nth-of-type(1) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.5s backwards;} #cssmenu.active li:nth-of-type(2) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.4166666666666667s backwards;} #cssmenu.active li:nth-of-type(3) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.3333333333333333s backwards;} #cssmenu.active li:nth-of-type(4) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.25s backwards;} #cssmenu.active li:nth-of-type(5) a { animation: topItemAnimation 0.5s cubic-bezier(.16,.84,.44,1) 0.16666666666666666s backwards;}@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { #cssmenu.active li a{animation:none!important;}}


Guardamos nuestra plantilla
Ahora en Diseño > Añadir un gadget Html/JavaScrip pegamos el siguiente código.

ver código 



.<div id="cssmenu">
    <ul>
        <li>
            <span>Creative <i class="arrow"></i></span>
            <ul class="dropdown">
                <li><a href="#">Curabitur</a></li>
                <li>
                    <span>Suspendisse vel <i class="arrow"></i></span>
                    <ul class="dropdown">
                        <li><a href="#">Etiam vestibulum</a></li>
                        <li><a href="#">Integer efficitur</a></li>
                        <li><a href="#">Finibus nibh</a></li>
                    </ul>
                </li>
                <li>
                    <span>
                        Eget
                        <img src="/mcmenu/img1.jpg" style="margin:10px;width:80px;vertical-align:middle;" />
                        <i class="arrow"></i>
                    </span>
                    <ul class="dropdown">
                        <li><a href="#">Nam elementum</a></li>
                        <li><a href="#">Magna pharetra</a></li>
                        <li><a href="#">Pulvinar mi eget</a></li>
                        <li><a href="#">Tincidunt orci</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">Studio</a></li>
        <li class="full-width">
            <span>Press <i class="arrow"></i></span>
            <div class="dropdown">
                <div class="clm">
                    <h3>Integer</h3>
                    <a href="#">Lacus iaculis</a>
                    <a href="#">Eu tortor</a>
                    <a href="#">Luctus varius</a>
                </div>
                <div class="clm">
                    <h3>Efficitur Viverra</h3>
                    <a href="#">Praesent</a>
                    <h3>At Eros</h3>
                    <a href="#">Pellentesque </a>
                    <a href="#">Dignissim pulvinar</a>
                </div>
                <div class="clm">
                    <a href="#"><img src="/mcmenu/img2.jpg" style="width:280px;" /></a>
                </div>
            </div>
        </li>
        <li><a href="#">Blog</a></li>
        <li>
            <span>Contact <i class="arrow"></i></span>
            <ul class="dropdown right0">
                <li><a href="#">Nam elementum</a></li>
                <li><a href="#">Magna pharetra</a></li>
                <li><a href="#">Pulvinar mi eget</a></li>
                <li><a href="#">Tincidunt orci</a></li>
                <li>
                    <span>
                        Eget
                        <img src="/mcmenu/img1.jpg" style="margin:10px;width:80px;vertical-align:middle;" />
                        <i class="arrow"></i>
                    </span>
                    <ul class="dropdown right0">
                        <li><a href="#">Nam elementum</a></li>
                        <li><a href="#">Magna pharetra</a></li>
                        <li><a href="#">Pulvinar mi eget</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>
Cambiamos la almohadilla # segun corresponda 

Publicar un comentario

0 Comentarios