Hello I am creating a website navigation menu. I have implemented a drop down option to one of my links but it is not displaying at all. I am sure this is a simple fix that I am overlooking, any help is appreciated.
I have only included relevant HTML and CSS code. Thanks!
HTML:
<nav onmouseout="hide()">
<ul id="navMenu">
<li>Home</li>
<li><span onmouseover="show(about)">About Us</span>
<div id="about" onmouseover="show(about)" style="visibilty:hidden;">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #922e2e;
margin-top: 4px;
margin-bottom: 4px;
}
li {
float: left;
}
li a, span {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navMenu div {
position: absolute;
visibility: hidden;
}
#navMenu div a {
display: block;
width: 500px;
height: 50px;
background-color: #922e2e;
color: black;
text-align: center;
margin-bottom: 0px;
}
#navMenu div:hover {
display: block;
background-color: #7e8182;
}
You can do this using CSS, no need to use javaScript. Check updated snippet below
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #922e2e;
margin-top: 4px;
margin-bottom: 4px;
}
li {
float: left;
}
li a, span {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
#navMenu div {
position: absolute;
display: none;
background-color: #7e8182;
}
#navMenu div a {
display: block;
width: 200px;
height: 50px;
background-color: #922e2e;
color: black;
text-align: center;
margin-bottom: 0px;
}
#navMenu li:hover div{
display: block;
}
<nav>
<ul id="navMenu">
<li>Home</li>
<li><span>About Us</span>
<div id="about">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>
No need if JS, just pure CSS. Hope this helps ;)
nav
{
margin-top:15px
}
nav ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
nav ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
nav ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
nav ul li.current-menu-item
{
background:#ddd
}
nav ul li:hover
{
background:#f6f6f6
}
nav ul div
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
nav ul div li
{
float:none;
width:200px
}
nav ul div a
{
line-height:120%;
padding:10px 15px
}
nav ul li:hover > div
{
display:block
}
<nav>
<ul id="navMenu">
<li>Home</li>
<li><a>About Us</a>
<div id="about">
Darwin
Alex
</div>
</li>
<li>Get a Quote</li>
<li>Contact Us</li>
</ul>
</nav>
Related
When I remove the margin-left, margin and padding value to 0px from the root ul tag then
all menu display in the left side and the dropdown-menu size match
I want to move all menus plus dropdown-menu to right. I moved the menu to the right using margin-left, margin: 15px, and padding 15px in the root ul tag and it works but the drop-menu size isn't matching, please look up the picture.
[output of this page] [1]: https://i.stack.imgur.com/jLZnO.png
[expect output] [2]: https://i.stack.imgur.com/wvOLY.png
ul {
margin: 15px;
padding: 15px;
list-style: none;
margin-left: 50%;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
You just need to add float:right in the css, in the ul part. Also remove the margin-left: 65%; because it will make your design unresponsive since your buttons have fixed width.
ul {
margin: 0px;
padding: 0px;
list-style: none;
float: right;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
try like this
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title> sport </title>
<link rel="stylesheet" href="sport.css">
</head>
<body>
<ul class="menu">
<li > <a>sport</a>
<ul>
<li >football </li>
<li >soccer </li>
<li >basketbal</li>
</ul>
</li>
<li > <a>more info</a>
<ul>
<li ># </li>
<li > # </li>
<li >#</li>
</ul>
</li>
</ul>
</body>
</html>
css
ul{
margin: 0px;
padding: 0px;
list-style: none;
}
ul li{
width: 200px;
height: 40px;
background-color:blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
position: relative;
}
ul li ul{
display:none;
position:absolute;
right:-200px;
top:0;
}
ul li a{
text-decoration: none;
color: white;
display: block;
}
ul li a:hover{
background-color: green;
}
ul li:hover ul{
display: block;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
float:right;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
<html>
<head>
<style>
</style>
</head>
<body>
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
</body>
</html>
add in ul style
ul{
float: right;
}
Try this Example
Html
<ul class="menu">
<li> <a>sport</a>
<ul>
<li>football </li>
<li>soccer </li>
<li>basketbal</li>
</ul>
</li>
<li> <a>more info</a>
<ul>
<li># </li>
<li> # </li>
<li>#</li>
</ul>
</li>
</ul>
Css
ul.menu {
width: 200px;
}
ul.menu>li{
position:relative;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: right;
width: 100%;
height: 40px;
background-color: blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul {
display: none;
}
ul li:hover ul {
display: block;
position:absolute;
left: 200px;
top: 0px;
width:200px;
}
Use this CSS:
ul.menu{
margin: 0px;
padding: 0px;
list-style: none;
margin-left:65%;
}
ul.menu li{
float: left;
width: 200px;
height: 40px;
background-color:blue;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
ul li a{
text-decoration: none;
color: white;
display: block;
}
ul li a:hover{
background-color: green;
}
ul li ul li{
display: none;
}
ul li:hover ul li{
display: block;
}
li {
position: relative;
}
li ul {
position: absolute;
left: 0;
margin: 0;
padding: 0;
display: block;
width: inherit;
}
I am trying a simple responsive menu with Css and jQuery. I want the jQuery script to work only on a certain window width. When I resize the browser. Here is my code.
$(document).ready(function(){
$(".resmenu").click(function(){
$(".menu").slideToggle();
});
$(".submenu").click(function(){
$(this).toggleClass("active_submenu");
$(this).parent().find(".dropdown").slideToggle();
});
});
.container {
width:980px;
margin:100px auto 0 auto;
font-family:arial;
}
ul, li {
margin:0;
padding:0;
}
.resmenu {
display:none;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
font-size: 14px;
text-transform: uppercase;
color: #3b2612;
padding: 6px 17px;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
.menu li:hover a {
background: #444;
color: #fff !important;
}
.menu li ul {
position: absolute;
width: 250px;
z-index: 5;
left: 0px;
top:28px;
display:none;
}
.menu li:hover ul {
display:block;
}
.menu li ul li {
display: block;
}
.menu li ul li a {
padding: 6px 17px;
transition: all 0.2s;
text-transform: capitalize;
}
.menu li ul li a:hover {
background: #000;
}
/*--- responsive ----*/
#media screen and (max-width:768px) {
.resmenu {
color: #fff !important;
display: block;
text-decoration: none !important;
background: #6ca2bd;
padding: 5px 10px;
}
.menu {
display: none;
background: #444444;
}
.menu li {
position: relative;
display: block;
}
.menu li a {
color: #fff;
font-size:14px;
padding: 6px 17px;
}
.menu li a:hover {
background-color: #000;
color: #000;
transition: all 0.3s;
}
.active_submenu {
background-color: #ceb689 !important;
color: #fff !important;
}
.menu li ul {
display: none;
width: 100%;
position: relative;
top: 0px;
display:none;
}
.menu li:hover ul {
display: none;
top: 0px;
}
.menu li a.active {
color: #fff;
font-family: 'opensanssemibold';
}
.menu li ul li a {
background:#333;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btm_header">
Menu
<ul class="menu">
<li>Menu</li>
<li>Dropdown One <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Dropdown Two <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
It is working on 768px screen size, but when I click on the drop-down link instead of hover on more than 768 screen size, the drop down link is slide toggle. I need this script work on certain width only.
Use $(window).width() to get the width of the screen and use it in your condition:
if ($(window).width() < 768) {
// run your code here
}
See code snippet:
$(document).ready(function() {
$(".resmenu").click(function() {
$(".menu").slideToggle();
});
$(".submenu").click(function() {
if ($(window).width() < 768) {
$(this).toggleClass("active_submenu");
$(this).parent().find(".dropdown").slideToggle();
}
});
});
.container {
width: 980px;
margin: 100px auto 0 auto;
font-family: arial;
}
ul,
li {
margin: 0;
padding: 0;
}
.resmenu {
display: none;
}
.menu li {
display: inline-block;
position: relative;
}
.menu li a {
font-size: 14px;
text-transform: uppercase;
color: #3b2612;
padding: 6px 17px;
letter-spacing: 1px;
display: block;
text-decoration: none;
}
.menu li:hover a {
background: #444;
color: #fff !important;
}
.menu li ul {
position: absolute;
width: 250px;
z-index: 5;
left: 0px;
top: 28px;
display: none;
}
.menu li:hover ul {
display: block;
}
.menu li ul li {
display: block;
}
.menu li ul li a {
padding: 6px 17px;
transition: all 0.2s;
text-transform: capitalize;
}
.menu li ul li a:hover {
background: #000;
}
/*--- responsive ----*/
#media screen and (min-width:769px) {
.menu {
display: block!important;
}
}
#media screen and (max-width:768px) {
.resmenu {
color: #fff !important;
display: block;
text-decoration: none !important;
background: #6ca2bd;
padding: 5px 10px;
}
.menu {
display: none;
background: #444444;
}
.menu li {
position: relative;
display: block;
}
.menu li a {
color: #fff;
font-size: 14px;
padding: 6px 17px;
}
.menu li a:hover {
background-color: #000;
color: #000;
transition: all 0.3s;
}
.active_submenu {
background-color: #ceb689 !important;
color: #fff !important;
}
.menu li ul {
display: none;
width: 100%;
position: relative;
top: 0px;
display: none;
}
.menu li:hover ul {
display: none;
top: 0px;
}
.menu li a.active {
color: #fff;
font-family: 'opensanssemibold';
}
.menu li ul li a {
background: #333;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="btm_header">
Menu
<ul class="menu">
<li>Menu</li>
<li>Dropdown One <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Dropdown Two <span></span>
<ul class="dropdown">
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
<li>Dropdown</li>
</ul>
</li>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
</div>
In css change "container" width to 100%, and set max-width to 980px.
I have different sublinks in my navigation bar. I'd like to collapse the navigation bar in mobile view (got that already) but it doesn't display all links
HTML
<nav class= "clearfix">
<ul class="clearfix navigation">
<li>
Bewerbung
<ul class="sub-menu" id="push">
<li>Motivation</li>
<li>Lebenslauf</li>
<li>Downloads</li>
</ul>
</li>
<li>
home
<ul class="sub-menu" id="push">
<li>Kontakt</li>
</ul>
</li>
<li>
Projekte
<ul class="sub-menu" id="push">
<li>Photographie</li>
<li>3D Animation</li>
</ul>
</li>
</ul>
Menu
</nav>
CSS
nav a {
transition:all linear 0.15s;
color: #fff;
display: table;
width: 250px;
text-align: center;
text-decoration: none;
line-height: 50px;
}
nav a:hover, nav a:active {
background-color: #ffffff;
color: #1D424A;
}
nav a#pull {
display: none;
}
nav a#mobile {
display: none;
}
.sub-menu{
display:none;
}
nav li:hover .sub-menu {
display: inline-block;
z-index:1;
opacity:1;
}
.sub-menu {
width:250px;
padding:0px 0px;
position: absolute;
top:100%;
z-index:-1;
opacity:0;
transition:opacity linear 0.15s;
background:#1D424A;
}
.sub-menu li {
display:block;
font-size:16px;
color: #363636;
}
.sub-menu li a {
padding:0px 0px;
display:block;
}
.sub-menu li a:hover, .sub-menu .current-item a {
background:#fff;
}
CSS in mobile view
nav {
height: auto;
border-bottom: 0;
}
nav ul {
display: none;
height: auto;
}
nav a#pull {
display: block;
background-color: #6A6A6A;
width: 100%;
position: relative;
margin-top: 0px;
color: #ffffff;
}
nav a#pull:after {
content:"";
width: 30px;
height: 20px;
display: inline-block;
position: relative;
right: 15px;
top: 10px;
margin-top: 0px;
}
nav li {
width: 100%;
float: left;
position: relative;
}
nav li a {
border-bottom: 1px solid #FFF;
}
nav a {
text-align: left;
width: 100%;
text-indent: 25px;
margin-top: 0px;
}
.sub-menu{
display: block;
}
JAVASCRIPT
$(function() {
var pull = $('#pull'),
menu = $('nav ul'),
menuHeight = menu.height();
$(pull).on('click', function(e) {
e.preventDefault();
menu.slideToggle();
});
});
$(window).resize(function() {
var w = $(window).width();
if(w > 320 && menu.is(':hidden')) {
menu.removeAttr('style');
}
});
http://ti-sign.ch/navbar/
It's because of the fixed height of 50px on .navigation :
.navigation {
list-style: none;
overflow: hidden;
padding: 0;
margin: 0 auto;
width: 750px;
height: 50px; /* remove that line and it works */
}
I have a CSS and HTML drop-down menu and I want to keep the width of my sub menus equal to their parent. I tried several ways but nothing works for me. If its possible to do it whether with CSS or with JS its fine for me here is my code
HTML
<nav>
<ul class="navi_main">
<li>Home</li>
<li>About
<ul class="sub_navi_main">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
<li>Products
<ul class="sub_navi_main">
<li>Prod 1</li>
<li>Prod 2</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
CSS
.navi_main{
display:block;
}
.navi_main li{
display: table-cell;
z-index: 100;
}
.navi_main li:first-child{
margin-left:0;
}
.navi_main li a {
text-decoration: none;
display: block;
font-size: 16px;
color: #8098b1;
padding: 0 14px;
height: 64px;
line-height: 64px;
border-right: 1px solid #e6e6e6;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
text-shadow: 0 1px 1px rgba(255,255,255,.64);
text-transform: uppercase;
position: relative;
}
.navi_main li a:hover, .navi_main li:hover > a{
color:#ffffff;
background:#9CA3DA;
}
.navi_main ul {
display: none;
margin: 0;
padding: 0;
width: 100%;
position:relative;
background: #ffffff;
z-index:999999;
}
.navi_main ul li {
display:block;
float: none;
background:none;
margin:0;
padding:0;
}
.navi_main ul li a {
font-size: 14px;
font-weight: normal;
display: block;
color: #797979;
border-left: 3px solid #ffffff;
background: #ffffff;
height:40px;
line-height:40px;
}
.navi_main ul li a:hover, .navi_main ul li:hover > a{
background:#f0f0f0;
border-left:3px solid #9CA3DA;
color:#797979;
}
.navi_main li > ul.visible{
display: block;
position:absolute;
}
.navi_main ul ul {
left: 149px;
top: 0px;
}
OK...I've simplified the CSS a little as you had some reduntant rules in there and made the CSS selectors somewhat more specific and I think this is what you are looking for.
Note: If you want multiline text you really can't set a line-height equal to the height. I took all the height statements and let the link sizing (with padding) determine the actual heigts.
I've made one of the sub-menus visible so you don't have to hover to see it.
* {
box-sizing: border-box;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.navi_main {
/* display: block;*/
/* not required */
}
.navi_main > li {
display: table-cell;
position: relative;
/* positioning context */
}
.navi_main > li > a {
text-decoration: none;
display: block;
font-size: 16px;
color: #8098b1;
padding: 16px;
border-right: 1px solid #e6e6e6;
transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
text-shadow: 0 1px 1px rgba(255, 255, 255, .64);
text-transform: uppercase;
}
.navi_main li a:hover,
.navi_main li:hover > a {
color: #ffffff;
background: #9CA3DA;
}
.navi_main li > ul {
position: absolute;
top: 100%;
left: 0;
display: none;
width: 100%;
background: #ff0000;
}
.navi_main li:hover > ul {
display:block;
}
.navi_main ul > li {
display: block;
background: #bada55;
}
.navi_main ul > li > a {
font-size: 14px;
font-weight: normal;
display: block;
color: #797979;
background: #ffffff;
padding:8px 16px;
border-left:2px solid white;
}
.navi_main ul li a:hover {
background: #f0f0f0;
color: #797979;
border-left:2px solid #9CA3DA;
}
.navi_main li > ul.visible {
display: block;
}
<nav>
<ul class="navi_main">
<li>Home</li>
<li>About
<ul class="sub_navi_main">
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
<li>Products
<ul class="sub_navi_main visible">
<li>Lorem ipsum dolor sit amet.</li>
<li>Prod 2</li>
</ul>
</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
Codepen Demo
I have to make dropdown always align center, according to the parent tag. Any help would be greatly appreciated.
The example is given below:
Fiddle Link: http://jsfiddle.net/abidkhanweb/ojxpt4m2/
You can do something like this:
#menu {
border-bottom: 1px solid #DDD;
color: #fff;
display: block;
float: right;
height: 18pt;
line-height: 18pt;
list-style-type: none;
text-transform: uppercase;
width: 100%;
font-size:14px;
position:absolute;
}
#menu > li{
background-color: #003399;
border: 1px solid #DDD;
margin-top:-1px;
float: right;
position: relative;
margin-left: 1%;
padding-left: 2%;
padding-right: 2%;
}
#menu li:hover {
opacity: 0.8;
}
#menu li .wrapper .submenu {
display: block;
margin-left: 50%;
width:100%;
}
#menu li .wrapper {
display: block;
position: absolute;
top: 19pt;
right: 50%; /*this will center the div*/
white-space: nowrap;
}
#menu li:hover .wrapper .submenu {
display: block;
}
.submenu li {
display: inline-block;
padding-left: 1.5%;
white-space: nowrap;
opacity: 0.7;
}
.submenu li a {
padding-right: 3%;
padding-left: 3%;
background-color: #000;
display: inline-block;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:110px;
text-align:center;
color:#C37000;
padding:1px 5px;
border-collapse:collapse;
font-weight:bold;
text-decoration:none;
margin:0;
}
.topmenu ul{
display:none;
}
.submenu a{
padding:1px 5px;
border:1px solid #C37000;
border-collapse:collapse;
color:#C37000;
font-weight:bold;
text-decoration:none;
background-color:#7F4800;
margin:0;
width:100%;
}
.submenu a:hover {
color:#4C4C4C;
background-color:#ffddbb !important;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
<ul id="menu">
<li class="topmenu">Menu 1</li>
<li class="topmenu">Menu 2
</li>
<li class="topmenu">Policies
<div class="wrapper">
<ul >
<li class="submenu"><a>Field 1</a></li>
<li class="submenu"><a>Field 2</a></li>
<li class="submenu"><a>Field 3</a></li>
<li class="submenu"><a>Field 4</a></li>
</ul>
</div>
</li>
<li class="topmenu">Menu 4</li>
</ul>
I assume you have applied position: absolute to the dropdown, for you to position it to the left, set the left property to the value of your padding for the policies container like so:
nav {
background: orange;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav > ul > li {
position: relative;
top: 0;
left: 0;
margin-left: 50px;
}
nav > ul > li > a {
display: inline-block;
color: white;
text-decoration: none;
padding: 5px 10px;
background: green;
}
nav > ul ul {
background: #eee;
border: 1px solid #000;
padding: 10px;
position: absolute;
left: -10px;
}
<nav>
<ul>
<li>Policies
<ul>
<li>Policy 1</li>
<li>Policy 1</li>
<li>Policy 1</li>
<li>Policy 1</li>
</ul>
</li>
</ul>
</nav>