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

Estrada Web Group
Administrador
¿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 artículo:

Más artículos geniales

Requisitos previos para el desarrollo de aplicaciones con ASP.NET Core

Requisitos previos para el desarrollo de aplicaciones con ASP.NET Core

Resumen: en este artículo aprenderás los requisitos previos, tanto de software como de habilidades técnicas, necesarios para desarrollar aplicaciones con ASP.NET Core.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla