¿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

Aprende a integrar pagos con PayPal en ASP.NET Core: Credenciales API Sandbox para realizar pagos

Aprende a integrar pagos con PayPal en ASP.NET Core: Credenciales API Sandbox para realizar pagos

En este artículo te mostrare donde puedes obtener las Credenciales API Sandbox para recibir pagos en tu página web desarrollada con ASP.NET Core y explicare los tipos de API que existen en PayPal, además creare unos artículos donde te mostrare como integrar PayPal en tu sitio web ASP.NET Core.

Ver artículo completo
Serialización y deserialización JSON con C#

Serialización y deserialización JSON con C#

¿Qué es serializar un json? JSON (JavaScript Object Notation) es un formato liviano para el intercambio de datos. Es fácil para los humanos leer, escribir, analizar y generar un JSON y es un formato de texto que es completamente independiente del lenguaje.

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 ;