28% de descuento del curso en SQL Server

Estrada Web Group Estrada Web Group
Crear menú con CSS y HTML
Estrada Web Group
Estrada Web Group
Estrada Web Group Estrada Web Group
Calificar:
06 agosto ASP.NET

¿Cómo crear un menú con CSS y HTML? Muy fácil y práctico

¿Cómo crear un menú con CSS y HTML? Muy fácil y práctico

visitas web, Posicionamiento Web, blog, pagina gratis

En este artículo explicare cómo crear un menú usando CSS y HTML. En un artículo anterior explique, Cómo crear un menú desplegable con jQuery como Facebook y Linkedin en asp.net

 

Normalmente vemos sitios web que contienen una barra de menú que se despliega cuando se pasa sobre ellos y que le da un toque muy padre y profesional a ti sitio web, en esta ocasión te mostrare como crear este menú. El ejemplo lo puedes descargar en la parte final de este post.

Paso 1

En primer lugar, añadir una hoja de estilos y un formulario o una página HTML.

A continuación, en la página HTML o del formulario Web de. NET añadimos un "Div" con el nombre como "divMenu".

Después de crear el Div, tenemos que añadir una lista que será nuestro menú y otra lista que será nuestro submenú, en seguida puedes ver el código HTML:

       <div id="divMenu">
                <ul>
                    <li><a href="#">Inicio</a>
                        <ul>

                            <li><a href="#">Quienes somos?</a></li>

                            <li><a href="#">Qué hacemos?</a></li>

                            <li><a href="#">Organigrama</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Portafolio</a>
                        <ul>
                            <li><a href="#">ASP.NET</a></li>
                            <li><a href="#">CSS</a></li>
                            <li><a href="#">jQuery</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Nosotros</a></li>
                    <li><a href="#">Blog</a>
                        <ul>
                            <li><a href="#">SEO</a></li>
                            <li><a href="#">Social Media</a></li>
                            <li><a href="#">AdSence</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Más info</a>
                        <ul>
                            <li><a href="#">Tips</a></li>
                            <li><a href="#">Consejos</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Contacto</a></li>
                </ul>
            </div>

Con este código se verá así nuestra página cuando se ejecute:

Paso 2

Así que para que se vea bien nuestro menú vamos a darle el estilo en la hoja de estilos que habíamos añadido antes.

Añade este código en su hoja de estilos:

#divMenu, ul, li, li li {
    margin: 0;
    padding: 0;
}
#divMenu {
    width: 150px;
    height: 27px;
}
    #divMenu ul {
        line-height: 25px;
    }
    #divMenu li {
        list-style: none;
        position: relative;
        background: #641b1b;
    }
        #divMenu li li {
            list-style: none;
            position: relative;
            background: #641b1b;
            left: 148px;
            top: -27px;
        }
        #divMenu ul li a {
        width: 148px;
        height: 25px;
        display: block;
        text-decoration: none;
        text-align: center;
        font-family: Georgia,'Times New Roman',serif;
        color: #ffffff;
        border: 1px solid #eee;
    }
    #divMenu ul ul {
        position: absolute;
        visibility: hidden;
        top: 27px;
    }
    #divMenu ul li:hover ul {
        visibility: visible;
    }
    #divMenu li:hover {
        background-color: #945c7d;
    }
    #divMenu ul li:hover ul li a:hover {
        background-color: #945c7d;
    }
    #divMenu a:hover {
        font-weight: bold;
    }

Espero que el ejemplo te sea de utilidad, envíanos un comentario para saber tus impresiones, el ejemplo lo puedes descargar de la siguiente liga: https://github.com/jiestrada/MenuCSS

Compartir:

Cargando...
Descarga el código fuente

Obten el código del sistema de gestión de proyectos.

Shape