Los enlaces de menú alineados a la derecha se utilizan en muchos sitios web. Al igual que el sitio web de hoteles que contiene muchas opciones en la sección del menú, pero en caso de emergencia, para contactarlos, se necesita atención específica. En ese caso, puede colocar todas las opciones del menú en el lado izquierdo de la barra de navegación y mostrar la opción de contacto en el lado derecho de la barra. Este diseño hará que el sitio web sea más atractivo que los enlaces del menú normal. Para crear los enlaces de menú alineados a la derecha, solo necesita HTML y CSS. Los enlaces de menú deben contener una lista de menú importante que desea mostrar en el lado derecho. El siguiente ejemplo ilustrará el enfoque del concepto.
Creación de la estructura: en esta sección, crearemos una estructura básica del sitio web para crear enlaces de menú alineados a la derecha.
- Código HTML para hacer la estructura:
<!DOCTYPE html><html><head><title>How To Create Right Aligned MenuLinks using HTML and CSS ?</title><metaname="viewport"content="width=device-width, initial-scale=1"></head><body><!-- Navbar items --><divid="navlist"><ahref="#">Home</a><ahref="#">Our Products</a><ahref="#">Careers</a><divclass="navlist-right"><ahref="#">About Us</a><ahref="#">Contact Us</a></div></div><!-- logo with tag --><divclass="content"><h1style="color:green; padding-top:40px;">GeeksforGeeks</h1><b>A Computer Science Portal for Geeks</b><p>How many times were you frustrated whilelooking out for a good collection ofprogramming/algorithm/interview questions?What did you expect and what did you get?This portal has been created to providewell written, well thought and wellexplained solutions for selected questions.</p></div></body></html>
Diseño de la Estructura: En la sección anterior, hemos creado la estructura del sitio web básico. En esta sección, diseñaremos la estructura de la barra de navegación.
- Código CSS de estructura:
<style>/* styling navlist */#navlist {background-color: #0074D9;position: absolute;width: 100%;}/* styling navlist anchor element */#navlist a {float:left;display: block;color: #f2f2f2;text-align: center;padding: 12px;text-decoration: none;font-size: 15px;}.navlist-right{float:right;}/* hover effect of navlist anchor element */#navlist a:hover {background-color: #ddd;color: black;}</style>
Combinando el código HTML y CSS: Este es el código final después de combinar las dos secciones anteriores. Puede ver que Inicio, Carreras y Nuestros productos están alineados a la izquierda de manera predeterminada, pero Acerca de nosotros y Contáctenos alineados a la derecha.
<!DOCTYPE html>
<html>
<head>
<title>
How To Create Right Aligned Menu
Links using HTML and CSS ?
</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<style>
/* styling navlist */
#navlist {
background-color: #0074D9;
position: absolute;
width: 100%;
}
/* styling navlist anchor element */
#navlist a {
float:left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 15px;
}
.navlist-right{
float:right;
}
/* hover effect of navlist anchor element */
#navlist a:hover {
background-color: #ddd;
color: black;
}
</style>
</head>
<body>
<!-- Navbar items -->
<div id="navlist">
<a href="#">Home</a>
<a href="#">Our Products</a>
<a href="#">Careers</a>
<div class="navlist-right">
<a href="#">About Us</a>
<a href="#">Contact Us</a>
</div>
</div>
<!-- logo with tag -->
<div class="content">
<h1 style="color:green; padding-top:40px;">
GeeksforGeeks
</h1>
<b>A Computer Science Portal for Geeks</b>
<p>
How many times were you frustrated while
looking out for a good collection of
programming/algorithm/interview questions?
What did you expect and what did you get?
This portal has been created to provide
well written, well thought and well
explained solutions for selected questions.
</p>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por Sabya_Samadder y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA