#activar ~ .desplegable {display: none;overflow: hidden;} #activar:checked ~ .desplegable {display: block;} -->
Menú Material Desing
 Menú JQuery con iconos
Como podemos cambiar la direccion de la pantalla de nuestro PC?
Menu CSS
Generador Tooltip
Listas para las entradas de mi blog
Plantilla Holiday
Como agregar WhatsApp a tu blog o sitio web.
Formulas basicas en Excel  Suma y resta
 Blockquote HTML y CSS
Carrusel o Slider de entradas destacadas
La función de redondear números en Excel

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