I have a navigation bar in my webpage, but i was not able to divide it. Some text to be on the left side and some text to be on the right side. I tried using this code from this reference: http://www.w3schools.com/css/css_navbar.asp
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<ul style="float:right;list-style-type:none;">
<li>About</li>
<li>Login</li>
</ul>
</ul>
But this doesn't seem to work. When i add that code in
<ul style="float:right;list-style-type:none;">
nothing happens.
Is their a better way of doing it?
Here is my list code
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<li>
<a href="#contact" >Contact</a>
</li>
<li>
<a href="#services" >Join Us</a>
</li>
<li>
<a href="#about" >About</a>
</li>
<li>
<a href="#top" >Home</a>
</li>
</section>
Take a look in your case in WorkingLink
You should first correct you markup then correct your css:
here i attach all correct form:
HTML:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<ul>
<li>Contact</li>
<li>Join Us</li>
<ul style="float:right;list-style-type:none;">
<li>About</li>
<li>Home</li>
</ul>
</ul>
<div>
</nav>
CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
you can try this one:
ul li
{
float:left;
padding:5px;
}
ul li a
{
padding:5px 10px;
color:#666666;
text-decoration:none;
font-size:18px;
background:#FFFFFF;
}
ul li a:hover
{
background:black;
color:white;
}
DEMO HERE
OR
.container
{
background:gray;
width:200px;
}
.container li
{
padding:5px 10px;
color:#666666;
background:green;
width:100%;
font-size:18px;
list-style-type:none;
}
.container li a
{
text-decoration:none;
}
.container li a:hover
{
background:red;
width:100%;
display:block;
padding:5px;
}
DEMO
Related
I have an issue with my dropdown menu: it isn't working. However, my menu IS.
The links don't work properly either, they take me to the page but not the section.
If I take out display: none on the dropdown menu CSS it does show my menu, but not as a dropdown. The menu is properly coded and there I guess, but it somehow doesn't display correctly.
<nav>
<ul class="menu">
<li class="...">
...
</li>
<li class="item">..</li>
<div class="....">
<ul>
<li>...</li>
<li>..</li>
<li>...</li>
<li>...</li>
</ul>
</div>
<li class="item">...</li>
<li class="item">...</li>
<li class="item">..</li>
</ul>
</nav>
It's semantically not correct to add div inside ul. Add submenu inside the parent li to which submenu belongs.
nav {
width: 100%;
flex: 1;
}
nav ul {
display: flex;
flex-flow: row wrap;
list-style: none;
padding-top: 4%;
margin: 0;
}
nav ul li {
padding: 1em 4em;
}
nav ul li a {
text-decoration: none;
margin-right: auto;
color: #000;
font-size: 17px;
}
nav ul li a:hover {
border-bottom: 2px solid #724c20;
}
li.logo {
margin-right: auto;
}
.Submenu {
display: none;
}
nav ul li:hover .Submenu {
display: block;
background-color: #724c20;
position: absolute;
margin-top: 15px;
margin-left: -15px;
}
nav ul li:hover .Submenu ul {
display: block;
margin: 10px;
}
nav ul li:hover .Submenu ul li {
width: 150px;
padding: 10px;
border-bottom: 1px;
background: transparent;
border-radius: 0;
text-align: center;
}
nav ul li:hover .Submenu ul li:last-child {
border-bottom: none;
}
nav ul li:hover .Submenu ul li a:hover {
color: #d1b9a5;
}
<nav>
<ul class="menu">
<li class="logo">
<img src="..." class="logo" alt="...">
</li>
<li class="item">..
<div class="Submenu">
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
</div>
</li>
<li class="item">..</li>
<li class="item">..
<div class="Submenu">
<ul>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
<li>..</li>
</ul>
</div>
</li>
<li class="item">..</li>
</ul>
</nav>
I use javascript to make drop down menues. Take the dropdown menu display: none;. To show drop down menu you have to do something, like click to an icon. So you have to import an icon or add a button and use javascript:
<script type="text/javascript">
$("*here comes your icon's/div's/button's id/class name you want*").click(function(){
$(".Submenu").toggleClass("active");
});
</script>
than you have to write in CSS what hapens when .Submenu will be active:
.Submenu.active {
display: block;
}
Here an exemple from my last project:
<script type="text/javascript">
$(".menu-toggle-btn").click(function(){
$(this).toggleClass("fa-times");
$(".navigation-menu").toggleClass("active");
});
If you want to when you click on an icon and the menu drops down the icon will change to another you have to write this to your javascript script: $(this).toggleClass("fa-times"); . toggleClass("here comes your icons class name ");
If you have any other questions feel free to ask.
I having problem with this dropdown menu, when you click on forms(link) open a menu, and if you move the out of the forms(links) the color change to blue and is hard to see it
any ideas how to fixed
Demo: http://jsfiddle.net/27Kgq/
HTML:
<nav id="menu">
<ul>
<li>Home</li>
<li>Forms
<ul id="smenu">
<li><a href="#" >Car Form</a></li>
<li>Job Fomr </li>
<li>Test Form </li>
<li>Forms </li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
CSS:
nav#menu
{
width:192px;
background:#FFF;
padding:0px;
margin:-7px 0px 0px 0px;
}
nav#menu a
{
color:#18819c;
text-decoration:none;
display:block;
height:100%;
margin: -10px 0px 0px -10px;
padding: 10px 0px 10px 10px;
}
nav#menu ul li
{
width: 192px;
margin: 5px 0px -8px -10px;
padding: 10px 0px 0px 10px;
border-bottom:2px solid #c9dce1;
}
nav#menu ul li:hover
{
background:#0f7691;
color:#FFF !important;
}
nav#menu ul li a:hover
{
color:#FFF;
}
#smenu {
display:none;
background:#FFF;
margin: 0px 0px 0px -10px;
padding: 0px 0px 0px 30px;
}
#smenu ul
{
margin:0;
}
#smenu ul li a:hover
{
background:#FFF;
}
JS:
$(document).ready(function(){
$('#showHide').click(function(){
$('#smenu').slideToggle('slow');
});
});
Add this to your css
nav#menu ul li:hover>a
{
color:#FFF;
}
You're doing it wrong. Make your HTML like this
<nav id="menu">
<ul>
<li>Home</li>
<li>Forms</li>
<li id="smenu">
<ul>
<li><a href="#" >Car Form</a></li>
<li>Job Fomr </li>
<li>Test Form </li>
<li>Forms </li>
</ul>
</li>
<li>Contact Us</li>
</ul>
</nav>
Use this selector nav#menu ul li:hover>a
See demo here
http://jsfiddle.net/27Kgq/1/
<li>Forms
You need to close out your '< li>' tag. Always create the closing tag at the same time as your opening tag with HTML or XML.
I'm struggling to get my logo and menu items vertically aligned in my header. Could you please hep me? (note that the header height changes when users scroll down by 100px and I'd like to keep the logo and menu vertically aligned based on the height of the header). Many thanks
http://jsfiddle.net/pPx62/
<div class="header big-height">
<div class="logo">Logo</div>
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a></li>
<li><a href='#'>Sub Link 2</a></li>
<li><a href='#'>Sub Link 3</a></li>
<li><a href='#'>Sub Link 4</a></li>
</ul>
</li>
</ul>
</div>
<!-- end header-->
<div class="spacer"></div>
<div class="block"></div>
<div class="block"></div>
.big-height {
height: 120px;
-webkit-transition-duration: 400ms;
-webkit-transition-function: linear;
}
.short-height {
height: 80px;
-webkit-transition-duration: 400ms;
-webkit-transition-function: linear;
}
.header {
width: 100%;
background: #fff;
color: #124191;
font-weight: 300;
font-size: 28px;
display: table;
position: fixed;
z-index: 999999;
opacity: 0.7;
background: aqua;
}
.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}
.drop_menu {
padding:0;
margin:0;
list-style-type:none;
float: right;
vertical-align: middle;
display: table;
}
.drop_menu li {
display: table-cell;
vertical-align: middle;
float:left;
}
.drop_menu li a {
padding:9px 20px;
display:block;
color:#666;
text-decoration:none;
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }
.block {
height: 800px;
background: green;
width:100%;
margin-top: 5px;
}
JS
$(function() {
var header = $(".header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 100) {
header.removeClass('big-height').addClass("short-height");
} else {
header.removeClass("short-height").addClass('big-height');
}
});
});
$(document).ready(function() {
var headerHeight = $(".header").height();
$(".spacer").css({"height": headerHeight+"px"});
});
Easiest way would be to specify a line-height equal to the height:
.big-height {
height: 120px;
line-height: 120px;
...
}
.short-height {
height: 80px;
line-height: 80px;
...
}
Check this updated fiddle of yours: http://jsfiddle.net/pPx62/1/
Update:
Regarding your question about logo image, using the same markup as you already have, the easiest way would be to use vertical-align on the img and make the logo div as display:table-cell.
Check this updated fiddle: http://jsfiddle.net/pPx62/2/
HTML:
<div class="logo">
<img src="yourimagehere" />
</div>
CSS:
.logo {
display: table-cell;
vertical-align: middle;
text-align: center;
...
}
.logo > img { vertical-align: middle; }
I have this dynamic UL, and I need it to be centered in my page.
Here is my HTML:
<ul id="nav">
<li><div class="tabquad">First</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
</ul>
</li>
<li><div class="tabquad">Second</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Four</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Five</div></a></li>
</ul>
</li>
<li><div class="tabquad">Third</div>
<ul>
<li><a class="item" href="#"><div class="tabquad">One</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Two</div></a></li>
<li><a class="item" href="#"><div class="tabquad">Three</div></a></li>
</ul>
</li>
</ul>
My CSS:
.tabquad{
color:white;
margin:auto;
position:relative;
border:2px solid #000;
border-color:rgb(82,115,154);
width:200px;
height:30px;
text-align:center;
padding-top:10px;
top:25px;
background-color:rgb(0,56,130);
}
.tabquad:hover{
background-color:rgb(49,87,132);
cursor: hand;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav a {
display: block;
width: 15em;
}
#nav li {
float: left;
width: 15em;
}
#nav li ul {
position: absolute;
width: 15em;
left: -999em;
}
.item{
color:#0E4063;
text-decoration:none;
}
#nav li:hover ul {
left: auto;
}
#nav li:hover ul, #nav li.sfhover ul {
left: auto;
}
My JS:
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
How do I center the whole thing?
Here you can find a test on jsfiddle
EDIT: I need 3 columns, all centered in my page.
Add this after your first #nav definition:
#nav {
width: 45em;
margin: 0 auto;
}
http://jsfiddle.net/GeraldS/ZGLtn/2/
If you don't want to give fixed width to the ul then add a outer div to ul and give text-align:center to the outer div
HTML
<div class="wrap">
ul goes here
</div>
CSS
.wrap{text-align:center}
DEMO
Use marginLeft and marginRight 'auto' with a width for the UL tag so that the left and right margin is automatically taken. For instance,
ul{
width: 300px;
margin: 0 auto; /* This center aligns the ul horizontally */
}
#nav {
width: 45em;
margin: 0px auto;
padding: 0px;
list-style: none;
}
my dropdown menu has position absolute and I want to center my dropdown menu to its respective li.I dont want to set margin statically because it will affect to other menu as well.
HTML
<div class="top_nav">
<!--naviagation top Begins-->
<ul>
<li id="active">
<img src="images/home.png" />home
<!-- <div class="DDmenu" id="hmedd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>-->
<div class="clear"></div>
<div class="current_menu"></div>
</li>
<li id="abt" onmouseover="showmenu('abtdd');" onmouseout="hidemenu('abtdd');" >
about us
<div class="DDmenu" id="abtdd" style="display:none">
<ul>
<li>Dummy1</li>
<li>Dummy2</li>
<li>Dummy3</li>
</ul>
</div>
</li>
<li id="invent" onmouseover="showmenu('inventdd');" onmouseout="hidemenu('inventdd');">
inventions
<div class="DDmenu" id="inventdd" style="display:none">
<ul>
<li>Dummy Invent1</li>
<li>Dummy Invent2</li>
<li>Dummy Invent3</li>
</ul>
</div>
</li>
<li id="archi" onmouseover="showmenu('archidd');" onmouseout="hidemenu('archidd');">
architectural
<div class="DDmenu" id="archidd" style="display:none">
<ul>
<li>Dummy Architecture1</li>
<li>Dummy Architecture2</li>
<li>Dummy Architecture3</li>
</ul>
</div>
</li>
<li id="artli" onmouseover="showmenu('artlidd');" onmouseout="hidemenu('artlidd');">
art pieces
<div class="DDmenu" id="artlidd" style="display:none">
<ul>
<li>Dummy art1</li>
<li>Dummy art2</li>
<li>Dummy art3</li>
</ul>
</div>
</li>
<li id="caravanli" onmouseover="showmenu('caravanlidd');" onmouseout="hidemenu('caravanlidd');">
caravan
<div class="DDmenu" id="caravanlidd" style="display:none">
<ul>
<li>Dummy caravan1</li>
<li>Dummy caravan2</li>
<li>Dummy caravan3</li>
</ul>
</div>
</li>
<li id="tab">
tables
</li>
</ul>
<!--naviagation top Ends-->
</div>
CSS:
.top_nav
{
width:100%;
height:30px;
/*margin-left:130px;*/
}
.top_nav ul
{
padding:0;
margin:0 0 0 68px;
}
.top_nav ul li#active
{
float:left;
position:relative;
padding:5px 0 0 0;
background: #c2cca2;
margin:0 8px;
color:#000;
list-style:none;
}
.top_nav ul li
{
float:left;
position:relative;
padding:12px 0 7px 35px; /*added padding top+5 to add space between bg and text*/
margin:0 8px;
list-style:none;
}
.top_nav ul li a
{
text-decoration:none;
text-transform:capitalize;
color:#fff;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
.top_nav ul li:hover a{color:#000;}
.top_nav ul li ul li a{color:#FFF!important;}
.top_nav ul li ul li:hover a{color:#000!important;}
.top_nav ul li a#active
{
text-decoration:none;
text-transform:capitalize;
color:#000;
font-size:14px;
font-weight:bold;
padding-right:6px;
vertical-align:baseline;
}
/*.top_nav ul li:hover
{
/*background:#c2cca2;
background:url(../images/menu_bg.png) left top repeat-y;
}*/
.top_nav ul li#abt
{
background:#c2cca2;
}
.top_nav ul li#invent
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#archi
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#artli
{
background:url(../images/art.png) 5px 5px no-repeat;
height:19px;
}
.top_nav ul li#caravanli
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#tab
{
background:#c2cca2;
height:19px;
}
.top_nav ul li#abt:hover
{
background:#c2cca2;
color:#000 !important;
height:19px;
}
.top_nav ul li#abt:hover>a:hover{color:inherit;}
.top_nav ul li:hover
{
color:#000;
}
.top_nav ul li#invent:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#archi:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#artli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#caravanli:hover
{
background:#c2cca2;
color:#000;
}
.top_nav ul li#tab:hover
{
/*background:#c2cca2;*/
background:#c2cca2;
color:#000;
}
/*.top_nav ul li a:hover
{
background:#c2cca2;
padding:16px 6px 2px 0;
padding:16px 6px 0 0\0/;
}*/
.top_nav ul li img
{
/*float:left;
position:relative;*/
padding:0 4px 0 5px;
}
JS
function showmenu(idm)
{
document.getElementById(idm).style.display='';
}
function hidemenu(idmn)
{
document.getElementById(idmn).style.display='none';
}
any suggestion would be appreciated.
hi i have a suggestion for you why not you use a navigation code without javascript try this
let me know if you have any issue or you want to use only javascript navigation
go this below link
http://jsfiddle.net/sarfarazdesigner/pNAkf/
or u can copy this code
css code :
*{margin:0; padding:0}
body{font-family:Arial, Helvetica, sans-serif; font-size:14px; background:#f7f7f7;}
#wrapper{width:980px; margin:50px auto;}
#nav{list-style:none; background:#333; height:30px; line-height:30px;}
ul#nav > li{
float:left;
border-right:1px solid #ccc;
position:relative;
}
ul#nav li a{
padding:0 15px;
display:block;
text-decoration:none;
color:#fff;
}
#nav li a:hover{
background:#ccc;
}
ul.subnavi{
list-style:none;
position: absolute;
left: 0;
background: #fff;
display:none;
}
ul.subnavi li{
display:block;
width:120px;
float:none;
}
ul#nav li ul.subnavi li a{
color:#333;
}
ul#nav li ul.subnavi li a:hover {
background:#333;
color:#fff;
}
#nav li:hover ul{
display:block;
}
html code is:
<div id="wrapper">
<ul id="nav">
<li>Home</li>
<li>Services
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Products</li>
<li>FaQs</li>
<li>Contact
<ul class="subnavi">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Blog</li>
</ul>
</div>
your css for .top_nav ul affects all the ul in the topnav class
try adding this to your css
.DDmenu
{
background: none repeat scroll 0 0 #DDDDDD; // just to show your result
display: none;
margin-left: -24px;
position: absolute;
}