I'm just barely learning how to code. I know there is more than one way to skin a cat, but what is the most efficient way to create a typical menu with lists, search fields, etc.?
I've been able to create all of the elements. I am having a very hard time getting the CSS correct to look the way I want.
Here is what my current project looks like.
This is what I am trying to achieve.
Thanks for the help! Any tips for a beginner would also be appreciated. Thank you!
Here is my HTML
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset ="UTF-8">
<link href = "racemonster.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body>
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart</li>
<li>Help</li>
<li>Sign In</li>
<li>Sign Up</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Here is the css
.headerLeft{color:#C4D82D;font-family:sans-serif;background-color:#323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight{color:#B1B3B5;font-family:sans-serif;background-color: #323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight ul {list-style-type: none;}
.headerRight ul li{display: inline;margin-right: 20px}
.headerRight ul li a{text-decoration: none;font-family: sans-serif;color: #898B8E;background-color:#323232;}
.headerRight ul li a:hover{color:#B1B3B5;}
.menu ul {list-style-type: none;width:100%; margin:0; padding-top:40px; padding-bottom:40px; background-color: #C4D82D}
.menu ul li {display:inline;margin-right: 20px;}
.menu ul li a {text-decoration: none;font-family: sans-serif;color:#323232;background-color: #C4D82D;}
.menu ul li a:hover {color:#999B9D;}
Updated Answer
Here is a solution... first check out my code (http://jsfiddle.net/ProgrammerKid/s01yuzm1/)
HTML
<div class="headers">
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart
</li>
<li>Help
</li>
<li>Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
<div class="header-padding"> </div>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
CSS
.headers {
width: 100%;
position: static;
}
.headerLeft {
width: 50%;
float: left;
box-sizing: border-box;
height: 120px;
}
.headerRight {
width: 50%;
box-sizing: border-box;
float: right;
height: 120px;
}
.header-padding {
height: 120px;
}
What I like to do is group the two headers into one big <div> so that they both share a common parent (disregarding the <body>)... Then I added a CSS float property, and set their width to 50%. This will align them...
The <div class="header-padding">[...]</div> element is to provide the links sections with enough padding... Since we float the two div's (.headerRight, and .headerLeft) the links sections would appear underneath the headers... therefore by placing the header padding element, we are providing the links section with enough space.
Old Answer
There is no "correct" way to make a header
That being said, it would be really helpful to the people answering your question if you included the HTML/CSS/JS code...
For now I will use a very abstract method of conveying my tips to you...
If we said the element with the word "NAME" inside it was a <div id="1"></div> and the element in which your menu items are in would be <div id="2"></div>, and the links were <div id="3"></div>
Then here is what your CSS should look like:
#1 {
width: 40%;
float: left;
}
#2 {
width: 50%;
float: left;
}
the above will align both the elements together
and below we will reduce the padding to around 10px;
#3 {
padding: 10px;
}
and that's all I can help you with for now until you upload your code
I have created css as you required it is very straightforward and easy to understand.
enter link description here
.container {
background-color:#323232;
}
.title {
color:#C4D82D;
margin-left:40px;
}
.headerLeft {
width:50%;
float:left;
height:100px;
display:inline-block;
}
.headerRight {
width:50%;
height:100px;
display:inline-block;
}
.headerRight ul li {
display:inline;
color:#B1B3B5;
}
.headerRight ul li a {
color:#b1b3b5;
}
.headerRight ul li a:hover {
color:#B1B3B5;
}
.menu {
background-color:#C4D82D;
height:50%;
position:relative;
padding-top:20px;
margin:(auto, auto, 0, 0);
}
.menu ul li {
display:inline;
}
.menu ul li a {
color:#323232;
}
.menu ul li a:hover {
color:#999B9D;
}
<body>
<div class="container">
<div class="headerLeft">
<h1 class="title">Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart |
</li>
<li>Help |
</li>
<li>Sign In |
</li>
<li>Sign Up |
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</body>
Related
I am making a website for our voluntary association. Still learning web development.
Secondary vertical menue in Navigation menu (for example in activities tab) does not show over the content. I found that it was due to the content below which is possitioned as position:relative (col3 class) when I remove this position:relative the problems solves but I need to keep it as it is for later improvements, you can view the website in this link
http://slsaj.com/panduka/Contact.html
this screen shot shows the issue
actually I have the same problem in Home menue (it is also due to this postion issue coming from javascript and css I guess) hope I would be able to solve it too with the answer to this question
<
<div class="body1">
<div class="main">
<!-- header -->
<header>
<div class="headerbox">
<nav>
<div class="brand">
<h1>xxxxx Assoication in Japan </h1>
</div>
<div id="main-nav3">
<ul id="menu">
<li ></span>
<ul>
</ul>
</li>
<li ><a>Activities<span class="drop-down"></span></a>
<ul>
<li ><a href="" target="_blank" id="events" >Events</a></li>
<li><a href="tharanga.html" id="events2" >Tharanga Magazine</a></li>
<li><a href="Conference.html" >Research Conference</a></li>
</ul>
</li>
<li ></span>
<ul>
</ul>
</li>
<li id="menu_active">Contact<span class="drop-down"></span>
<ul>
</ul>
</li>
<li ></span>
<ul>
</ul>
</li>
</ul>
</div> <!-- menu -->
</nav>
</div>
</header>
<!-- / header -->
<!-- content -->
<article id="content">
<div class="wrapper">
<div class="box1">
<div class="line1 wrapper">
<section class="col1">
<h2><strong>O</strong>ur<span> Details</span></h2>
<strong class="address">
President:<br>
Telephone:<br>
E-Mail:<br>
Secretary:<br>
E-Mail:<br> <br>
Fb:
</strong>
Mr. xxxx<br>
080<br>
xxxx[at]gmail.com <br>
Ms. xxxxx<br>
xxxx[at]gmail.com <br> <br>
#xxxxxxxxx
</section>
<section class="col2 pad_left1"> <!-- This is the cause for this problem ***** -->
<h2 class="color2"><strong>S</strong>ubcribe to<span> email database</span></h2>
<p class="pad_bot1">
You can subcribe to out email database by filling the following form <br>
Subcribe !
</p>
</section>
</div>
</div>
</div>
<!-- This col2 position:relative is the cause for this problem ***** -->
.col2 {margin:0 6px;width:560px;position:relative}
#main-nav3 {
float: left;
width: 700px;
z-index: 30;
}
#main-nav3 ul {
font-size:12px;
list-style: none;
}
#main-nav3 ul li {
float: left;
}
#main-nav3 ul li:first-child {
border: none;
}
#main-nav3 ul li a {
display: block;
position: relative;
width: auto;
text-decoration: none;
font-size:17.8px;
}
#main-nav3 ul li a span.drop-down {
}
#main-nav3 ul li:hover {
background: pink;
}
#main-nav3 ul li ul {
display: none;
}
#main-nav3 ul li:hover ul {
background: brown;
display: block;
position: absolute;
}
#main-nav3 ul li ul li {
float: none;
display: block;
border-left: none;
position: relative; z-index:10;
}
#main-nav3 ul li ul li a {
width: auto;
border-top: dotted 1px #7dad16;
color: yellow;
In the .headerbox css class, opacity: 0.9; is causing the issue. comment that out.
also in #main-nav3 ul li ul {...} add z-index:10; which will fix the dropdown menu issue.
I am trying to create a slide down vertical menu. My menu pushes down the other li's in the main part of the section like it's supposed to. The only problem is that the submenus move are moved to the right, and I want them lined up with their parent. This jsfiddle shows that problem. The source code is below, but all of it is in the jsfiddle.
Thanks,
Kirie
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>DEMO</title>
<style>
div{
width:180px;
}
div ul ul {
display: none;
}
div ul li:hover > ul {
display: block;
}
div ul li {
list-style:none;
background:#F00;
width:180px;
}
div ul ul li {
background:blue;
width:180px;
}
div ul ul li a{
width:180px;
color:white;
}
div ul ul ul li {
background:red;
width:180px;
}
</style>
</head>
<body>
<div>
<ul>
<li>Home</li>
<li>Tutorials
<ul>
<li>Photoshop</li>
<li>Illustrator</li>
<li>Web Design
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li>Articles
<ul>
<li>Web Design</li>
<li>User Experience</li>
</ul>
</li>
<li>Inspiration</li>
</ul>
</div>
</body>
</html>
Add the below to your CSS:
ul ul{
padding:0; /* stop children from being offset left */
}
Demo Fiddle
Is this what you are looking for.
Add a class to the sub menus and style it as folowing
.sub
{
padding: 0px;
}
I have this HTML code and CSS for a horizontal menu. It displays the links (boxes) from left to right floated to the left of the page.
What is the best way to make one of the links (boxes) display to float to the right of the page?
I have tried using float right with the below CSS copied as navigation-right and changed the HTML as needed but that did not work.
HTML
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
<li>Acudetox</li>
</ul>
</div>
CSS
.navigation-left {
height:auto;
list-style:none;
margin-right:40px;
display:inline;
}
.navigation-left li{
width:200px;
height:25px;
margin:5px;
padding:5px;
background-color:#666666;
border:none;
text-align:center;
display:inline-block;
}
.navigation-left li:hover{
background-color:#f36f25;
color:#FFFFFF;
}
.navigation-left li a{
font-family:Calibri, Arial;
font-size:18px;
font-weight:bold;
color:#ffffff;
text-decoration:none;
}
.navigation-left li.current {
background-color:#F36F25;
}
.navigation-left li.current a {
color:#FFFFFF;
}
http://jsfiddle.net/W2x5y/
Is this Fiddle what you wanted?
<div class="navigation-left" style="float:left">
<ul>
<li>Home</li>
<li>SAF</li>
</ul>
</div>
<div class="navigation-left">
<ul style="float:right; ">
<li>Acudetox</li>
</ul>
</div>
As you might expect, a simple float: right; does the trick.
<div class="navigation-left">
<ul>
<li>Home</li>
<li style="float: right">SAF</li>
<li>Acudetox</li>
</ul>
</div>
http://jsfiddle.net/W2x5y/1/
I think that you'd have to target some of the li tags with a class if you wanted to do that. Plus you need to max the width of the containing ul in order to give it room to float on the right.
http://jsfiddle.net/W2x5y/2/
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
<li class="right">Acudetox</li>
</ul>
</div>
ul {
width: 100%;
}
.right {
float: right;
}
Interesting questions. I'm hoping this helps.
You should anchor the navigation-left and navigation-right to a navigation box itself.
html:
<div class="nav-box">
<div class="nav-left">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="nav-right">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
CSS
body .nav-box {
top:0;
width:100%;
height:auto;
background:#eee;
overflow:hidden;
}
.nav-box .nav-left {
display:inline;
left:0;
float:left;
width:auto;
}
.nav-box .nav-right {
display:inline;
right:0;
top:0;
float:right;
width:auto;
}
Working example: http://jsfiddle.net/VA7ya/1/
It seems like the two navs are sufficient different to split them into two elements. Create two elements. Here's a Fiddle: http://jsfiddle.net/q7e3M/1/
<div class="container">
<div class="navigation-left">
<ul>
<li>Home</li>
<li>SAF</li>
</ul>
</div>
<div class="navigation-right">
<ul>
<li>Acudetox</li>
</ul>
</div>
</div>
If you want to keep the same element: http://jsfiddle.net/Afxkt/1/
<ul class="navigation">
<li>Home</li>
<li>SAF</li>
<li class="navigation-right">Acudetox</li>
</ul>
CSS:
.navigation {
display: inline;
list-style: none;
}
.navigation li {
float: left;
}
.navigation-right {
float: right;
}
All at right side
.right_side{ float:right}
<div class="navigation-left right_side">
<ul>
<li>Home</li>
<li>SAF</li>
<li>Acudetox</li>
</ul>
</div>
Last <li> to the right
.navigation-left li:last-child{ float:right}
first <li> to the right
.navigation-left li:first-child{ float:right}
second <li> to the right
.navigation-left li:nth-last-child(2){ float:right}
I have the following css vertical navigation menu I have done. There are up and down images for the parent category 30px high for rollover and separate up and down images for the second and third levels of the menu rollover at 25px high.
For each level, there is a different type of up and down images if there is no continuing category.
It works OK except for 3 areas that I have been struggling with for days now and can't seem to see where I have gone wrong.
The first is that the text for each level gets smaller and smaller for some reason and the second is that at the third level, all the images shown the up and down images as if there it a continuing category, and last but not least, when a category is selected in the first, second or third category, I can't seem to find a way to keep those links highlighted to show the user that they are in that area.
I hope someone is able to figure this out as I have been going crazy for days now. Thanks in advance.
Please find the current code below (in the image areas I have described what the images are for to understand what images I am using) :
The HTML:
<div id="nav">
<ul class="menu">
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
The CSS:
#nav {
float:left;
width:200px;
z-index:1;
}
#nav ul.menu, #nav ul.menu > ul.sub-menu, #nav ul.menu > ul.sub-sub-menu {
display:block;
width:200px;
margin:0;
padding:0;
list-style-type: none;
}
#nav ul.menu > li {
float: left;
display:block;
width:200px;
height:30px;
font-size:0.9em;
line-height:2.2em;
margin-bottom:1px;
}
#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
float: left;
display:block;
width:200px;
height:25px;
font-size:0.7em;
line-height:2.2em;
}
#nav li a {
display:block;
width:200px;
color:#FFF;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
list-style-type:none;
}
#nav ul.menu > li > a {
background: transparent url('../../parent-category-with-submenus.png');
display:block;
width:200px;
height:30px;
margin-bottom:1px;
}
#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
background: transparent url('../../second-third-categories-with-submenus.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.sub-menu > li:hover > a:only-child, #nav ul.sub-sub-menu > li:hover > a {
background: transparent url('../../second-third-categories-with-NO-submenus-ROLLOVER.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.menu ul ul li {
float: none;
list-style-type: none;
}
#nav li > ul {
display: none;
list-style-type: none;
}
#nav li:hover > ul {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:0px;
margin-left:192px;
}
#nav li:hover > ul.sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-40px;
margin-left:198px;
}
#nav li:hover > ul.sub-sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-30px;
margin-left:198px;
}
Font Size
You font size gets smaller because you are using ems. An em is a relative unit. If you're base font size is 20px and you're using 0.75em then the font size of a child element whose parent used the base 20px font size would be 15px (20x0.75=15). Now a child of that child (grandchild) would start with the child's font size of 15px and it's font size would be 11.25px (15x0.75=11.25). I set the text to be 16px for all li in the jsFiddle below.
UP and DOWN images
I didn't bother figuring out the exact issue with this but you do have a lot of kruft in this part of your CSS. I would add a class to the li that has a sub-menu within it. Something like .has-sub-menu. Then target the anchor tags like so .menu > .has-sub-menu > a and .sub-menu > .has-sub-menu > a. Also see the jsFiddle below.
HTML
<div id="nav">
<ul class="menu">
<li>Home</li>
<li class="has-sub-menu">
Home
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
</ul>
</div>
CSS
.menu > .has-sub-menu > a {
background-image: url(img-one.png);
}
.sub-menu > .has-sub-menu > a {
background-image: url(img-two.png);
}
Navigation Highlighting
This one cannot be done with CSS unless you add a class to each li or anchor tag. Something along the lines of the name of the page and then on each page add a body class of the same or similar name.
HTML
<!-- your code -->
<body class="products">
<!-- more of your code -->
<div id="nav">
<ul class="menu">
<li class="products">Products</li>
<li class="about">About</li>
<!-- more links -->
</ul>
<!-- more links -->
</div>
<!-- more of your code -->
</body>
In the example above we are viewing the products page. For the about page you would replace the class on the body tag with about. In the end this does not have to be added to the body tag but some other ancestor element. But the body tag is a nice clean solution and helps ensure that the class will be encapsulated within one another.
Then you could target the link like so with your CSS.
CSS
/* non-active */
#nav li {
color: white;
background-color: red;
}
/* active */
.products .products,
.about .about {
color: red;
background-color: blue;
}
If the above is not doeable then I believe you will have to do some light programming via PHP, ASP or whatever server side language you have available to you. You could also use JavaScript. You can also find answers to this with a simple StackOverflow search.
The fiddle below addresses all three issues with the solutions above. I also added a little jQuery so you can switch out and try the navigation highlighting.
http://jsfiddle.net/u2V8v/
Issue #1: The text gets smaller in the sub-menus because you have this rule
#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
...
font-size:0.7em;
...
}
while the default for the first level items is
#nav ul.menu > li {
...
font-size:0.9em;
...
}
Either remove the font-size decalaration for the submenus or set the value to inherit
Issue #2
I couldn't test this since I don't have your images so I'm not sure if this is what's causing the problem but it seems you're missing the > a at the end of this CSS rule selector
#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
background: transparent url('../../second-third-categories-with-submenus.png');
...
}
Issue #3
To highlight the menu items you can just set a background color on the hover state, they will stay highlighted while the user is browsing sub-menus
#nav ul li:hover{
background:red;
}
I am trying to make a navigation bar with a four columns submenus. I coded most of things, but when I creating the submenu I found the problem.
This is my HTML:
<div id="navigation">
<ul>
<li class="current">
Home
</li>
<li class="sub-menu">
Our Products
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
Main Menu Item
</li>
<li class="one">
Main Menu Item
</li>
<li class="one">
Main Menu Item
</li>
</ul>
</div>
<div class="col">
<ul>
<li class="two">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="three">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="four">
<img src="" />
Promoting Peace in the Niger Delta
</li>
<li class="five">
<img src="" />
Promoting Peace in the Niger Delta
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="">
Service Maintenance
</li>
<li class="sub-menu">
Frequently Ask Questions
<li class="sub-menu">
Our Products
<div class="subnav product">
<div class="content">
<div class="col">
<ul>
<li class="one">
Main Sub Item
</li>
<li class="one">
Main Sub Item
</li>
<li class="one">
Main Sub Item
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Hope somebody will help me out.
Thank you.
The problem is the container width is defined at 300px
#navigation ul li > div.product {
width: 300px;
}
And its child elements are taking up 100% of that space. So you need to make sure they have room to float left.
#navigation div.col {
float: left;
height:200px;
width: 25%;
}
Hopefully that helps with your question.
Fiddle
Check this http://jsfiddle.net/qtvVK/11/embedded/result/.
I made some changes to your markup and used display:inline-block; instead of floating elements
Relevant CSS syles
/* Dropdown styles */
#navigation ul > li > ul.sub-menu {
display: none;
position:absolute;
padding:10px 0;
background:#fff;
border: 1px solid #DDDCDC;
top: 24px;
z-index: 1;
}
/* Show dropdown when hover */
#navigation ul > li:hover > ul.sub-menu {
display:block;
}
.row {
width:auto;
white-space: nowrap;
}
.col {
display: inline-block;
vertical-align: top;
padding: 0 10px;
}
i suggest using jQuery.
it has simple function called slideDown().
Here is a link to a good tutorial.
You should do like so: First hide your menu when script starts:
$("#idOfDropDownMenu").hide();
And command to drop menu down when mouse enters button and slide up when it leaves it:
$("#idOfButton").hover(function(){ //function that fires when mouse enters
$("#idOfDropDownMenu").slideDown();
}, function() { //function that fires when mouse leaves
$("#idOfDropDownMenu").slideUp();
}
Instead of using IDs you can use any CSS selector.
I hope this helps with your question.
css
ul li ul
{
display: none;
position: fixed;
margin-left: 191px;
margin-top: -37px;
}
ul li:hover ul
{
display: block;
}
ul li a:hover
{
color: #fff;
background: #939393;
border-radius:20px;
}
ul li a
{
display: block;
padding: 10px 10px;
color: #333;
background: #f2f2f2;
text-decoration: none;
}
ul
{
background: #f2f2f2;
list-style:none;
padding-left: 1px;
width: 194px;
text-align: center;
}
html
<ul>
<li>Home</li>
<li>
About
<ul>
<li>About Me
<li>About Site
</ul>
</li>
<li>Contact</li>
</ul>