Estoy tratando de hacer que mi sitio para un proyecto de clase sea más receptivo y estoy luchando para que mi barra de navegación sea plegable. ¿Es esto algo que se hace con HTML y CSS? ¿O se puede hacer esto simplemente en HTML? Esta es la primera vez que trabajo con un diseño receptivo.
Aquí está el código que tengo para mi navegación.
/* CSS Document */
body {background-color: whitesmoke;}
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456!important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none!important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover.sub_menu1 {
display: block;
z-index: 10;
position: absolute;
background: lightblue;
top: 100%;
}
.navigation li:hover.sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover.sub_menu1 ul li {
padding: 5px;
}<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="Keywords" content="Portoflio, Alexandria's portfolio, graphic design, web development.">
<meta name="Description" content="This is Alexandria's portfolio.">
<meta name="viewport" content="width=device-width, initial- scale=1, shrink-to-fit=no">
<title>MY Portfolio</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.typekit.net/dmw1ifs.css">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<!--
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/b ootstrap.min.css" integrity="sha384- 9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7 Sk" crossorigin="anonymous">
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
link to your own stylesheet -->
</head>
<body>
<!--This is the body. The body contains the webpage contents such as the mission statement and vision. -->
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<!-- Toggler/collapsibe Button -->
<!-- Navbar links -->
<li><a href="index.html">Home</a></li>
<li><a href="portfolio2.html">Portfolio</a>
<div class="sub_menu1">
<ul>
<li><a href="FINAL_LOGO_PORTFOLIO copy.pdf">Logo Portfolio</a></li>
<li><a href="Menu Designs.pdf">Menu Designs</a></li>
</ul>
</div>
</li>
<li><a href="about_Me2.html">About ME</a>
<li><a href="contact2.html">Contact</a></li>
</ul>
</div>
</section>
</header>Solución del problema
No sé si querías hacer una barra de navegación expandible o simplemente colapsar la navegación, así que hice esto:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav>
<div>
<a href="&">
<img src="./" alt="logo"/>
</a>
</div>
<ul>
<li><a href="/">HEY 1</a></li>
<li><a href="/">HEY 1</a></li>
<li><a href="/">HEY 1</a></li>
</ul>
</nav>
</body>
</html>
CSS
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
width: 100%;
background-color: red;
height: 40px;
}
nav div {
padding: 10px;
}
ul {
list-style: none;
display: flex;
margin: 0;
gap: 20px;
}
Si necesita algo más, no dude en responder mi respuesta.
No hay comentarios.:
Publicar un comentario