#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Photopea, editor de imágenes gratis
Plantilla ClickMag-2
Introducción al HTML
Hacer tooltip con una imagen
Rutinas The Ordinary
Personalizar la primera letra de las entradas del blog
Convertidor PDF, JPG, Word, Excel, PNG...
Efectos imágenes para las entradas de nuestro blog
Plantilla Vogue
Cómo Insertar un PDF en excel
Botón subir arriba
Calcular el porcentaje

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