I'm using a nav bar for my website which I got from an online template. I made some necessary changes in code and made it suitable for my project. But I'm unable to add a drop down menu. How can I add dropdown menu in the main menu.
Here is the code
html {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
body {
font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;
}
p {
padding: 0 0 20px 0;
line-height: 1.7em;
}
#menubar {
width: 880px;
height: 46px;
}
ul#menu {
float: right;
margin: 0;
}
ul#menu li {
float: left;
padding: 0 0 0 9px;
list-style: none;
margin: 1px 2px 0 0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
}
ul#menu li a {
font: normal 100% 'trebuchet ms', sans-serif;
display: block;
float: left;
height: 20px;
padding: 6px 35px 5px 28px;
text-align: center;
color: #FFF;
text-decoration: none;
background: #5A5A5A url(tab.png) no-repeat 100% 0;
}
ul#menu li.selected a {
height: 20px;
padding: 6px 35px 5px 28px;
}
ul#menu li.selected {
margin: 1px 2px 0 0;
background: #00C6F0 url(tab_selected.png) no-repeat 0 0;
}
ul#menu li.selected a, ul#menu li.selected a:hover {
background: #00C6F0 url(tab_selected.png) no-repeat 100% 0;
color: #FFF;
}
ul#menu li a:hover {
color: #E4EC04;
}
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="post.css"/>
</head>
<body>
<div id="main">
<div id="menubar">
<ul id="menu">
<!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
<li>Home</li>
<li><a ref="#">Projects</a></li>
<li>Publications</li>
<li><a ref="#">News</a></li>
<li><a ref="#">Members</a></li>
<li><a ref="#">Gallery</a></li>
<li><a ref="#">Contact Us</a></li>
</ul>
</div>
</div>
</body>
</html>
I followed many online tutorials. But I couldn't display drop down sub menu arrow for above main menu.
CSS:
html{ height: 100%;}
*
{ margin: 0;
padding: 0;}
body
{ font: normal .80em 'trebuchet ms', arial, sans-serif;
background: #FFF;
color: #555;}
nav{
margin-top:15px
}
nav ul{
list-style:none;
position:relative;
float:left;
margin:0;
max-width:700px;
width:100%;
background: #5A5A5A url(tab.png) no-repeat 0 0;
height:50px;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
nav ul a{
display:block;
color: #fff;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif;
padding:10px;
border-radius:5px;
align-self:center;
}
nav ul li{
position:relative;
float:left;
margin:0;
padding:0;
}
nav ul li.current-menu-item{
background: gray;
}
nav ul li a:hover{
color: yellow;
cursor: pointer;
}
nav ul ul{
display:none;
position:absolute;
top:100%;
left:0;
background: #5A5A5A url(tab.png) no-repeat 0 0;
padding:0
}
nav ul ul li{
float:none;
width:200px;
background: #5a5a5a;
}
nav ul ul a{
line-height:120%;
padding:10px 15px
color: white !important;
}
nav ul ul ul
{
top:0;
left:100%
}
nav ul li:hover > ul
{
display:block
}
/* standard */
body {
font-family: 'Open Sans';
font-size:15px
}
a{
text-decoration:none;
color:#fff;
}
HTML:
<nav>
<div>
<ul>
<!-- put class="selected" in the li tag for the selected page - to highlight which page you're on -->
<li ><a href="#" >Home</a></li>
<li ><a ref="#" >Projects</a></li>
<li ><a href="#" >Publications</a></li>
<li ><a ref="#" >News</a></li>
<li ><a ref="#" >Members</a></li>
<li ><a ref="#" >Gallery</a></li>
<li ><a ref="#" >Contact Us</a></li>
<li>Dropdown
<ul>
<li>Dark</li>
<li>Basic Light</li>
<li>Playful</li>
<li>Elegant</li>
</ul>
</li>
</ul>
</div>
</nav>
Related
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>
I built a menu and I did box-shadow in the top of the menu and when it hover. But I still want that the box shadow will be fixed for the floor of the menu.
HTML:
<body>
<div class="head">
<ul id="menu">
<li><a class="active" href="index.html">Home</a></li>
<li>About</li>
<li> Buy</li>
<li>Media</li>
<li>Support</li>
<li class="border"></a>
</ul>
<div id="logo">TheCsgo</div>
</div>
</body>
CSS:
body {
direction:rtl;
margin:0;
padding:0;
font-family: 'Open Sans Hebrew', sans-serif;
background-image:url('http://on-winning.com/wp-content/uploads/2016/01/J3jrEQs.jpg');
}
.head {
background-color:#2980b9;
width:100%;
height:100px;
}
#menu{
margin:0;
padding:0;
list-style-type;
none;
}
#menu li {
display:inline;
float:right;
padding-right:60px;
}
#menu li a {
display:block;
padding-top:38px;
color:#FFFFFF;
text-decoration:none;
font-size:16px; transition: 0.3s ease-out;
box-shadow:inset 0px 4px #2980b9;
}
#menu li a:hover {
box-shadow:inset 0px 4px #FFFFFF;
}
#menu li a.active {
box-shadow:inset 0px 4px #FFFFFF;
}
#logo {
margin-left:30px;
float:left;color:#FFFFFF;
font-size:52px;
margin-top:10px;
}
.body2 {
width:1300px;
height:800px;
background-color:#2980b9;
opacity: 0.8;
margin:auto;
display:block;
margin-top:35px;
color:#FFFFFF;
direction:rtl;
}
.body2 p {
font-size:16px;
padding-right:15px;
}
Full code
you may use multiple shadow and use line-height to size the height of your links:
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
/* Index page */
html {
margin: 0;
direction: rtl;
font-family: 'Open Sans Hebrew', sans-serif;
}
body {
direction: rtl;
margin: 0;
padding: 0;
font-family: 'Open Sans Hebrew', sans-serif;
background-image: url('http://on-winning.com/wp-content/uploads/2016/01/J3jrEQs.jpg');
}
.head {
background-color: #2980b9;
width: 100%;
overflow:hidden;
}
#menu {
margin: 0;
padding: 0;
}
#menu li {
display: inline;/* kills the bullet*/
float: right;
padding-right: 40px;
}
#menu li a {
display: block;
line-height:100px;
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
padding:0 1em;
transition: 0.3s ease-out;
box-shadow: inset 0px 4px #2980b9, inset 0px -4px #2980b9;
}
#menu li a:hover,
#menu li a.active{
box-shadow: inset 0px 4px #FFFFFF,inset 0px -4px #FFFFFF;
}
#logo {
margin-left: 30px;
float: left;
color: #FFFFFF;
font-size: 52px;
margin-top: 10px;
}
<div class="head">
<ul id="menu">
<li><a class="active" href="index.html">Home</a>
</li>
<li>About
</li>
<li> Buy
</li>
<li>Media
</li>
<li>Support
</li>
</ul>
<div id="logo">TheCsgo</div>
</div>
https://jsfiddle.net/71q10huy/1/
you could also use flex and justify-content to keep every elements on a single line and let spacing in between elements care of themselves. https://jsfiddle.net/71q10huy/3/
#import url(http://fonts.googleapis.com/earlyaccess/opensanshebrew.css);
/* Index page */
html {
margin: 0;
direction: rtl;
font-family: 'Open Sans Hebrew', sans-serif;
}
body {
direction: rtl;
margin: 0;
padding: 0;
font-family: 'Open Sans Hebrew', sans-serif;
background-image: url('http://on-winning.com/wp-content/uploads/2016/01/J3jrEQs.jpg');
}
.head {
background-color: #2980b9;
width: 100%;overflow:hidden;
}
.head, #menu {
margin: 0;
padding: 0;
display:flex;
flex:1;
flex-flow:row reverse;
justify-content:space-between;
list-style-type:none;
}
#menu {
margin-left:15%
}
#menu li a {
display: block;
line-height:100px;
color: #FFFFFF;
text-decoration: none;
font-size: 16px;
padding:0 1em;
transition: 0.3s ease-out;
box-shadow: inset 0px 4px #2980b9, inset 0px -4px #2980b9;
}
#menu li a:hover,
#menu li a.active{
box-shadow: inset 0px 4px #FFFFFF,inset 0px -4px #FFFFFF;
}
#logo {
margin-left: 30px;
float: left;
color: #FFFFFF;
font-size: 52px;
margin-top: 10px;
}
<body>
<div class="head">
<ul id="menu">
<li><a class="active" href="index.html">Home</a></li>
<li>About</li>
<li> Buy</li>
<li>Media</li>
<li>Support</li>
</ul>
<div id="logo">TheCsgo</div>
</div>
</body>
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>
Menu items for the Zoom portions I need them to function as a button click. The Test1-4 I need to function like a checkbox. The Zoom to buttons are working correctly. The Test1-4 are not working properly
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a title='Zoom to U.S' input type='button' name='US' onclick='US();'><span>Zoom to U.S.</span></a></li>
<li><a title='Zoom to Canada' input type='button' name='Canada' onclick='Canada();'><span>Zoom to Canada</span></a></li>
<li><a title='Zoom to Mexico' input type='button' name='Mexico' onclick='Mexico();'><span>Zoom to Mexico</span></a></li>
<li><a title='Test 1 KML' input type='checkbox' id='kml-Test1-check' name='kml-Test1-check' onclick="toggleKml('Test1');"><span>Test 1 KML</span></a></li>
<li><a title='Test 2 KML' input type='checkbox' id='kml-Test2-check' name='kml-Test2-check' onclick="toggleKml('Test2');"><span>Test 2 KML</span></a></li>
<li><a title='Test 3 KML' input type='checkbox' id='kml-Test3-check' name='kml-Test3-check' onclick="toggleKml('Test3');"><span>Test 3 KML</span></a></li>
<li><a title='Test 4 KML' input type='checkbox' id='kml-Test4-check' name='kml-Test4-check' onclick="toggleKml('Test4');"><span>Test 4 KML</span></a></li>
<li><a title='Additional KMLs'input type='button' name='AKML' onclick='open_win();'><span>Additional KMLs</span></a></li>
<li><a title='Remove all KMLs on the screen'input type='button' name='RKML' onclick='killKML();'><span>Remove All KMLs</span></a></li>
<li class='last'><a title="Contact"><span>Contact</span></a></li>
</ul>
</div>
</body>
#cssmenu {
border: none;
border: 0px;
margin: 0px;
padding: 0px;
font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
width: auto;
}
#cssmenu ul {
background: #333333;
height: 35px;
list-style: none;
margin: 0;
padding: 0;
}
#cssmenu li {
float: left;
padding: 0px;
}
#cssmenu li a {
background: #333333 url('images/seperator.png') bottom right no-repeat;
display: block;
font-weight: normal;
line-height: 35px;
margin: 0px;
padding: 0px 25px;
text-align: center;
text-decoration: none;
}
#cssmenu > ul > li > a {
color: #cccccc;
}
#cssmenu ul ul a {
color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
background: #2580a2 url('images/hover.png') bottom center no-repeat;
color: #FFFFFF;
text-decoration: none;
}
#cssmenu li ul {
background: #333333;
display: none;
height: auto;
padding: 0px;
margin: 0px;
border: 0px;
position: absolute;
width: 225px;
z-index: 200;
/*top:1em;
/*left:0;*/
}
#cssmenu li:hover ul {
display: block;
}
#cssmenu li li {
background: url('images/sub_sep.png') bottom left no-repeat;
display: block;
float: none;
margin: 0px;
padding: 0px;
width: 225px;
}
#cssmenu li:hover li a {
background: none;
}
#cssmenu li ul a {
display: block;
height: 35px;
font-size: 12px;
font-style: normal;
margin: 0px;
padding: 0px 10px 0px 15px;
text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
background: #2580a2 url('images/hover_sub.png') center left no-repeat;
border: 0px;
color: #ffffff;
text-decoration: none;
}
#cssmenu p {
clear: left;
}
Your HTML is in correct, instead of
<li><a title='Zoom to U.S' input type='button' name='US' onclick='US();'><span>Zoom to U.S.</span></a></li>
Use
<li><a title='Zoom to U.S'><input type='button' name='US' onclick='US();'/><span>Zoom to U.S.</span></a></li>
DEMO
I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed :
This is what I achieved but is not working on IE9 :|
http://fiddle.jshell.net/Hz2JH/
<ul id="main">
<li class="username" tabindex="1" >
<a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">Log Off</li>
</ul>
</li>
</ul>
ul#main {
color: 232323;
width: 120px;
border:2px solid #ccc;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:#f1f1f1;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
So how can I build a custom select like the one used on twitter?
This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.
#addMenu, #addMenu ul {
list-style: none;
}
#addMenu {
float: left;
}
#addMenu > li {
float: left;
}
#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}
#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}
#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000;
}
#addMenu ul li:hover a {
background: #ddd;
}
HTML
<ul id='addMenu'>
<li>
<a href='#'>MENU</a>
<ul class='noJS'>
<li><a href='URL'>Option1</a></li>
<li><a href='URL'>Option2</a></li>
<li><a href='URL'>Option3</a></li>
<li><a href='URL'>Option4</a></li>
</ul>
</li>
</ul>