Menú desplegable ancho total
How do I make an menú desplegable ancho total?
Menú que al pasar el puntero por encima de un elemento que contenga una segunda lista anidada, muestra esta última en horizontal ocupando todo el ancho disponible. What is a menú desplegable ancho total? How do you make a menú desplegable ancho total? This script and codes were developed by Oloman on 22 August 2022, Monday.
Menú desplegable ancho total - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Menú desplegable ancho total</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, html { margin: 0; padding: 0; background: #ccc; text-align: center; font-family: "Yanone Kaffeesatz", sans-serif; font-size: 20px; line-height: 22px;
}
.cabecera { width: 100%; height: 0; padding-bottom: 25%; overflow: hidden; position: relative; border-bottom: 4px double #666;
}
header img { position: absolute; top: -60%; left: 0; width: 100%; height: auto; margin: 0; padding: 0;
}
nav { position: relative; width: 100%; margin: 0 auto;
}
ul.fullnav, ul.fullnav ul { list-style: none; width: 100%; margin: 0; padding: 0; border: 0; font-size: 0; text-align: center;
}
ul.fullnav { border-top: 4px double #666; border-bottom: 4px solid #999; background: #bbb;
}
ul.fullnav li { display: inline-block; margin: 0; padding: 0; font-size: 22px; line-height: 60px;
}
ul.fullnav li a { display: block; padding: 0 10px; text-decoration: none; text-transform: uppercase; color: #333;
}
ul.fullnav li ul { position: absolute; left: 0; width: 100%; height: 0; overflow: hidden; background: #999; line-height: 0; z-index: 3;
}
ul.fullnav ul a { color: white;
}
ul.fullnav li:hover a { background: #999;
}
ul.fullnav li:hover ul { height: auto;
}
ul.fullnav li:hover ul li a { background: transparent;
}
ul.fullnav li:hover ul li a:hover { text-decoration: none; color: #333;
}
section { padding: 40px; text-align: left;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <header> <div class="cabecera"> <img src="http://1.bp.blogspot.com/-XL4Br3tCL3g/U7PfReX_VcI/AAAAAAAAQpI/BmljEZJkH44/s1200/esperando.gif"/> </div> <h1>Full drop menu</h1> <nav> <ul class="fullnav"> <li><a href="#">Inicio</a></li> <li><a href="#">Países</a> <ul> <li><a href="#">Argentina</a></li> <li><a href="#">Chile</a></li> <li><a href="#">España</a></li> <li><a href="#">México</a></li> <li><a href="#">Perú</a></li> <li><a href="#">Venezuela</a></li> </ul> </li> <li><a href="#">Rutas</a> <ul> <li><a href="#">Norte</a></li> <li><a href="#">Sudeste</a></li> <li><a href="#">Centro-Oeste</a></li> <li><a href="#">Camino 42</a></li> </ul> </li> <li><a href="#">Galería</a> <ul> <li><a href="#">En verde</a></li> <li><a href="#">Ocres</a></li> <li><a href="#">Amigos</a></li> <li><a href="#">Miscelánea</a></li> </ul> </li> <li><a href="#">Los protas</a> <ul> <li><a href="#">Antonio Ruiz</a></li> <li><a href="#">Benjamín Sanz</a></li> <li><a href="#">Carlos Pardo</a></li> <li><a href="#">John Smith</a></li> <li><a href="#">Sam Gordon</a></li> <li><a href="#">Peter Ustinov</a></li> </ul> </li> </ul> </nav>
</header>
<section>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sit amet odio pharetra, tincidunt arcu in, luctus est. Maecenas varius lectus nec enim commodo, id hendrerit tellus congue. Quisque sagittis tristique nibh vel ornare. Donec sit amet feugiat risus, vel interdum sem. Morbi ut sem fringilla, congue ante quis, elementum leo. Vestibulum eu augue est. Quisque mattis gravida lectus a rutrum. Etiam et nisi in nibh dictum vehicula a eget est. Praesent malesuada magna in mauris fermentum, id convallis augue auctor. Vestibulum a dapibus leo. Nam quis iaculis enim, eu varius erat. Aenean non tortor faucibus, tempor nunc nec, dignissim nibh. Integer lorem lacus, lobortis dapibus pretium in, sodales et nibh. Phasellus vitae aliquet leo. Aenean lectus quam, pretium dictum lectus id, volutpat ullamcorper risus.</p>
<p>
Donec id commodo magna. Nunc sed mauris felis. Vestibulum malesuada purus at nibh pretium, sed sollicitudin dolor feugiat. Nullam luctus lectus ut dignissim convallis. Cras quis elementum metus. Integer finibus rutrum ultrices. Curabitur nisl nulla, mollis id feugiat in, varius sed nisl. Vivamus id arcu purus. Vivamus hendrerit sed neque ut maximus. Sed luctus mattis dolor, et venenatis felis lobortis vel. Suspendisse in ligula vel leo consectetur facilisis nec sed leo. Sed quam felis, ornare nec augue sed, pellentesque blandit sem.</p>
</section>
<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet type="text/css"/> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Menú desplegable ancho total - Script Codes CSS Codes
body, html { margin: 0; padding: 0; background: #ccc; text-align: center; font-family: "Yanone Kaffeesatz", sans-serif; font-size: 20px; line-height: 22px;
}
.cabecera { width: 100%; height: 0; padding-bottom: 25%; overflow: hidden; position: relative; border-bottom: 4px double #666;
}
header img { position: absolute; top: -60%; left: 0; width: 100%; height: auto; margin: 0; padding: 0;
}
nav { position: relative; width: 100%; margin: 0 auto;
}
ul.fullnav, ul.fullnav ul { list-style: none; width: 100%; margin: 0; padding: 0; border: 0; font-size: 0; text-align: center;
}
ul.fullnav { border-top: 4px double #666; border-bottom: 4px solid #999; background: #bbb;
}
ul.fullnav li { display: inline-block; margin: 0; padding: 0; font-size: 22px; line-height: 60px;
}
ul.fullnav li a { display: block; padding: 0 10px; text-decoration: none; text-transform: uppercase; color: #333;
}
ul.fullnav li ul { position: absolute; left: 0; width: 100%; height: 0; overflow: hidden; background: #999; line-height: 0; z-index: 3;
}
ul.fullnav ul a { color: white;
}
ul.fullnav li:hover a { background: #999;
}
ul.fullnav li:hover ul { height: auto;
}
ul.fullnav li:hover ul li a { background: transparent;
}
ul.fullnav li:hover ul li a:hover { text-decoration: none; color: #333;
}
section { padding: 40px; text-align: left;
}
Developer | Oloman |
Username | oloman |
Uploaded | August 22, 2022 |
Rating | 3 |
Size | 3,743 Kb |
Views | 52,624 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Simplest RWD jQuery slider | 3,725 Kb |
CSS - Colorful fan menu | 2,414 Kb |
CSS - Circular drop menu | 2,590 Kb |
Before-After TwentyTwenty jQuery plugin | 6,257 Kb |
Book 3D | 3,653 Kb |
Responsive video loader | 3,643 Kb |
CSS Drop cards Social buttons | 3,502 Kb |
Scotch tape css effect | 2,726 Kb |
CSS Responsive accordion social buttons | 3,606 Kb |
CSS Spoiler | 2,717 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Off Canvas | Mariamarica | 1,870 Kb |
Playing with transition timing | Mattgrosswork | 1,993 Kb |
Vertically rotating text with CSS | Nopr | 2,141 Kb |
Basic template | Tomcat | 1,675 Kb |
After America | Jonathangarner | 2,686 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Octopus Bar iPad App Interactions | Davidkpiano | 6,735 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Sign Up Form | Sicontis | 5,272 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!