I'm trying to make a simple top menu with one level of submenus. I want to animate them with translate3d, but I can't manage to get them to sit behind the header with z-index. I'm using Foundation, so the header looks a bit like this:
#main-menu > li {
position: relative;
}
#main-menu ul {
position: absolute;
-webkit-transition: transform 400ms ease; (omitted other prefixes)
transform: translate3d(0,-100%,0);
}
#main-menu > li:hover ul {
transform: translate3d(0,0,0);
}
<div id="header">
<div class="row">
<div class="large-3 small-12 columns">
<a id="logo" href="/"></a>
</div>
<div class="large-9 small-12 columns">
<nav>
<ul id="main-menu" class="menu">
<li class="has-children">
Foo
<ul>
<li>
First Child
</li>
<li>
Second Child
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
So in the normal state the submenus #main-menu ul are translated vertically by their height so that when the main menus buttons are hovered the submenus slide down. However, I can't seem to make it so that the submenus are behind the entire header but appear above the content below.
this may help to your.This can do in several ways.this is one of it.you can do it easily if you start to use bootstrap.this solution only use html, css and js.this may a quick help to you.
<!DOCTYPE>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("li.one").mouseenter(function(){
$("div.submenu").fadeIn(500,function(){
$(this).mouseleave(function(){
$(this).fadeOut(500);
});
});
});
});
</script>
<style type="text/css">
body{
margin: 0;
}
ul{
background-color:black;
}
ul li{
color: white;
list-style-type: none;
display:inline;
font-size:30px;
width:100px;
margin-left: 30px;
margin-right: 30px;
}
div.submenu li{
list-style-type: none;
color: white;
font-size: 30px;
width:200px;
background-color: black;
text-align: center;
position: relative;
top:-15px;
left:550px;
}
div.submenu{
display: none;
}
</style>
</head>
<body>
<div style="text-align:center;">
<ul>
<li class="one">Basin & Sinks</li>
<li>Bathroom Accessories</li>
<li>Showers </li>
<li>Toilets</li>
</ul>
<div class="submenu">
<li>one</li>
<li>two</li>
</div>
</div>
</body>
</html>
You need to set your either your header or main menu (depending on the style you going for) to absolute with no z-index applied and then add a negative z-index to the absolute positioned sub-menu. this will hide the submenu content behind the parent elements.
* {
margin:0;
padding:0:
}
#header {
background: #f4f4f4;
border-bottom: 1px solid #e3e3e3;
height:60px;
position:relative;
}
#main-menu {
position:absolute;
width:100%;
height:30px;
list-style:none;
}
#main-menu li > a {
display:block;
text-decoration:none;
padding:1em 2em;
}
#main-menu li.has-children ul {
position:absolute;
z-index:-1;
top:100%;
-webkit-transition: transform 400ms ease;
transform: translate3d(0,-100%,0);
background:#f4f4f4;
border:1px solid #e3e3e3;
padding:1em;
}
#main-menu li:hover ul {
transform: translate3d(0,20%,0);
}
<div id="header">
<div class="row">
<div class="large-3 small-12 columns">
<a id="logo" href="/"></a>
</div>
<div class="large-9 small-12 columns">
<nav>
<ul id="main-menu" class="menu">
<li class="has-children">
Foo
<ul>
<li>
First Child
</li>
<li>
Second Child
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
Related
I can't seem to understand how I should center this menu among the logo and the login/register
http://jsfiddle.net/hnnsr97x/2/
HTML
<header id="header">
<div id="LogReg">
<h2>Login | Register</h2>
</div>
<div id="logo">
<a class="logo" href="index.html"><img alt="Logo" title="logo" src="Logo/logo.png" ></a>
</div>
<nav id="menu">
<ul class="main_menu">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</header>
CSS:
#header {
width:100%;
}
#logo, #menu {
float:left;
}
#menu {
}
#menu li {
display:inline-block;
}
#LogReg {
text-align:right;
}
The fiddle is quite empty because I cleared it from some things I tried
So I'm here to ask for someone to explain how I should get the menu in the center? I'm obviously missing something.
Try this: http://jsfiddle.net/hnnsr97x/6/
the calc(50% - 500px) is saying make the margin-left 50% minus the width of the image and half of the menu
#logo{
float:left;
}
#menu {
float:left;
margin-left: calc(50% - 500px);
}
Do you mean centering the menu like this?
<header id="header">
<div id="LogReg">
<h2>Login | Register</h2>
</div>
<div class="container">
<div id="logo">
<a class="logo" href="index.html">
<img alt="Logo" title="logo" src="Logo/logo.png" >
</a>
</div>
<nav id="menu">
<ul class="main_menu">
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</div>
</header>
CSS style:
#header {
width: 100%;
}
.container {
display: block;
margin: 0 auto;
width: 300px;
}
#logo {
float: left;
}
#menu {
float: right;
}
.main_menu {
margin: 0;
}
#menu li {
display: inline;
}
#LogReg {
text-align: right;
}
http://jsfiddle.net/jonathanzuniga/66xnov5z/embedded/result/
See working demo here Centered Menu
HTML:
<header id="header">
<div id="LogReg">
Login | Register
</div>
<div id="logo">
<a class="logo" href="index.html">LOGO</a>
</div>
<nav id="menu">
<ul>
<li>MENU1</li>
<li>MENU2</li>
<li>MENU3</li>
</ul>
</nav>
</header>
CSS:
#header {
width:100%;
display:block;
position:relative;
}
#LogReg {
float:right;
}
#logo{
position:absolute;
top: 0px;
left:10px;
}
#menu{
display:block;
width:100%;
text-align:center;
overflow:hidden;
}
#menu li {
display:inline;
}
https://jsfiddle.net/AkashPinnaka/0eq1f9az/embedded/result/ I am assuming you are intended to make them align in a line. And obviously you know the height of your logo. Let me assume your logo is of height 40px.
Modify your HTML code to the following code.
<header id="header">
<div id="logo">
<a class="logo" href="index.html"><img alt="Logo" title="logo" src="http://www.planwallpaper.com/static/images/9-credit-1.jpg"></a>
MENU1
MENU2
MENU3
</div>
<div id="LogReg">
Login | Register
</div>
</header>
And CSS code as following
#header {
width:100%;
height: 100px;
}
div#logo{
float: left;
}
div#logo a{
/* line-height: 100px; */
display: table-cell;
vertical-align: middle;
}
div#LogReg{
line-height: 40px;
float: right;
}
img{
height: 40px;
width: 80px; /* just assumed to be 80px wide. Width doesn't matter as long as it is not too long. */
}
I took img height as 40px in css as I assumed.
This aligns logo, navigation menu and login|register in the same line.
If you need Login|Register a bit higher than logo and menu, just reduce the line-height of div#LogoReg to less than 40px.
And if u want some margin on both left and right sides, wrap your whole header content in another div tag as shown below
<header id = "header">
<div id = "header_in">
</div>
</header>
and give the width of div#header_in as 80% or something you like. This gives the margin on both left and right sides of your header.
div#header_in{
width: 80%;
}
Let me know if you want anything different.
I've some troubles with the navigation bar from my website. The position of the navigation bar changes when the dropdown menu becomes visible.
Also when resizing the browser the navigation bar change.
This is ofcource not really my intention. So please can someone help me?
I would appreciated very much.
This is my css code I'm using.
/*main menu*/
.nav-top {list-style:none;
}
ul.nav-top ul { margin-top:-40px; margin-bottom:-50px; margin-left:-21px; margin-right:-50;
position: relative; display:none; }
ul.nav-top li { display:inline-block;
padding:40px;
margin-right:19px;
position:relative;
}
ul.nav-top li:hover> ul { display:block; }
ul.nav-top li a { display:block;
text-decoration:none;
border-bottom: 2px solid transparent;
}
ul.nav-top a:hover{ color:#686A6A;
border-bottom:2px solid #E4E4E4;
}
/*sub menu*/
ul.nav-top ul ul { clear:both;
border: solid 1px ffffff; }
ul.nav-top li li {
display:block;
/* Introducing a padding between the li and the a give the illusion spaced items */
padding:2px; padding-top:10px;
}
ul.nav-top ul ul li {
}
ul.nav-top ul ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
ul.nav-top ul ul li:hover a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
text-decoration:none; background:#FFF;
}
ul.nav-top ul ul li:hover a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
color:#686A6A; border-bottom:2px solid #E4E4E4;
}
thanks for your answer.
This is my HTML:
</head>
<body>
<div id="header">
<img src="images/logo-marco-kaller.png">
<ul class="nav-top">
<li>home</li>
<li>about</li>
<li>work
<ul>
<li>design</li>
<li>paintings</li>
<li>sculptures</li>
</ul>
<li>shop</li>
<li>news</li>
<li>contact</li>
</ul>
</div>
<div id="background"></div>
<div class="wrapper">
<div id="content-background"><br>
<h1>Marco Kaller</h1>
<p>Welkom op de site van Marco Kaller!</p>
<div id="content">
</div>
</div>
</div>
<div id="footer">
<img width="25" height="25" alt="facebook Marco Keller" src="images/facebook.png" />
<ul class="talen">
<li>language:</li>
<li>en</li>
<li>nl</li>
<li>de</li>
</ul>
<hr class="faded" />
</div>
I am trying to learn HTML/CSS ,for that I am trying to convert a PSD TO HTML,here is what I am trying to do
Here what I have don't so far
,as you see there is space between my two divs ,and I don't seem to undestand why ,
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css" >
</head>
<body>
<header>
<div class=Container>
<p> <span style="font-size:16px;color:#b4b4b4 ">phu concepts</span><br>
<span style="font-size:52px "><span style="color:#990202">TEST</span>
<span style="color:#f1a2a2">PROJECT</span></span>
</p>
<img src="Images/ChatImg_02.png" style="position: relative;float:right;top:-90px" >
<div id="headerDIV" >
<ul>
<li>
HOME
</li>
<li>
ABOUT
</li>
<li>
SERVICES
</li>
<li>
GALLERY
</li>
<li>
CONTACT US
</li>
</ul>
</div><!--headerDIV-->
</div><!--headerDivContainer-->
<div id="topRedStrip"></div>
</header>
<section id="main">
<div class=mainContainer>
<div class="slider"> <!---THIS is the DIV that doesn't listen-->
<img src="Images/sliderImage_06.png" alt="Slider Image" style="position:relative; float:left">
</div>
</div><!--Container-->
</section>
<footer>
</footer>
</body>
</html>
and here is my css
#headerDIV
{
}
header p
{
font-family: "myriad Pro";
margin-bottom:0;
margin-top:0;
width:500px;;
}
#chatDiv
{
position:relative;
float:right;
}
#topRedStrip
{
position:relative;
top:12px;
background-repeat: repeat-x;background-image:url('../images/redStrip_03.jpg');
width: 100%;
z-index: -2;
height: 8px;
}
.slider
{
position:relative;
float:left;
}
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
height: 200px;
float: right;
}
.Container
{
margin: 0 auto;
width:936px;
}
.mainContainer
{
margin: 0 auto;
width:936px;
height:auto;
}
header ul
{
padding: 0;
margin:0;
z-index: -1;
}
header li
{
list-style-type: none;
float:left;
padding-left: 30px;
font-family: "myriad Pro";
font-size:12px;
color: #504848;
padding-top:9px;
}
Can anyone tell me why I get empty space between the div,
Thanks
Every major browser has an inspect mode which allows you to examine the box model and to alter CSS definitions until they match. I suggest you dig into these tools, as they will open you the door to handle all of these questions.
Here's Chrome as example:
Once you have entered the inspection mode, you can browse through the elements and see what is causing the distance.
It seems to be because the height of your header div is 200px:
#headerDIV
{
position:relative;
top:0;
right:-90px;
z-index:-1;
background-image:url('../images/headerBLACk_03.png');
background-repeat:no-repeat;
width:470px;
**height: 200px;**
float: right;
}
It doesn't need to be 200px when the only thing in it is the black navigation bar.
I want the logo div to be on top of the nav container. How would I achieve this? I have been playing around with positioning and nothing seems to be working. They are both inside the header container.
Here is my CSS code:
and js link:
http://jsfiddle.net/4vA93/3/
header {
position: relative;
height:100px;
background-color: yellow;
}
.logo {
position: absolute;
margin-top:10px;
margin-left:20px;
width:80px;
height:80px;
background-color: red;
}
nav {
position: absolute;
width:100%;
bottom: 0;
background-color: bisque;
}
and HTML
<header>
<div id="logo">Logo</div>
<nav>
<ul>
<li>| Hours |</li>
<li> Facilities |</li>
<li> Restaurant Charlotte |</li>
<li> Penthouse Suite |</li>
<li> Gift Shop |</li>
</ul>
</nav>
</header>
Do you mean like this? http://jsfiddle.net/4vA93/4/
#logo {
z-index:10;
}
Or like this? http://jsfiddle.net/4vA93/5/
I am currently learning Ruby on Rails by following Micheal Hartl's tutorial to create a twitter clone.
I was working on the CSS code for the front page. But for some weird reason, It is rendering a different view for both Firefox and Chrome.
I have added screenshots. The navigation bar in the upper right page ( consisting of Home, Help and Sign In) seems to disappear in Firefox.
I have tried tinkering around with the code, but I just can't seem to get the logo and the navigation bar to get aligned in Firefox, like they are aligned in Chrome.
Here is the CSS code:
.container{
width: 710px;
padding-left:30px;
}
body{
background: #cff;
padding-left:30px;
margin:1em;
}
header{
margin-top: 30px;
padding-top: 30px;
padding-left: 20px;
}
header img {
padding: 1em;
background: #fff;
position: relative;
margin-left:-1.1em;
}
section{
margin-top:1em;
font-size:120%;
padding:20px;
background: #fff;
}
section h1{
font-size:200%;
}
a{
color: #09c ;
text-decoration:none;
}
a:hover{
color: #069;
text-decoration:underline;
font-weight:bold;
}
a:visited{
color:#069;
}
nav{
float:right;
background: white;
padding: 0 0.7em;
white-space:nowrap;
margin-top: -5.4em;
margin-left:-0.4em;
}
nav ul{
margin: 0;
padding: 0;
}
nav ul li{
list-style-type:none;
display:inline-block;
padding:0.2em 0;
}
nav ul li a {
padding: 0 5px;
font-weight: bold;
}
nav ul li a:visited{
color: #09c;
}
nav ul li a:hover{
text-decoration:underline;
}
a.signup {
margin-left:auto;
margin-right:auto;
display:block;
text-align:center;
width: 190px;
color:#fff;
background: #006400;
font-size:150%;
font-weight:bold;
padding:20px;
}
.round{
border-radius: 10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
footer {
text-align: center;
width:800px;
margin-left:auto;
margin-right:auto;
margin-top:100px;
}
footer nav{
float:none;
}
The image and the Navigations are defined in the header.html.erb page. The code of that page is:
<header>
<%= link_to logo,root_path %>
<nav class = "round">
<ul>
<li> <%= link_to "Home", root_path %></li>
<li> <%= link_to "Help", help_path %></li>
<li> <%= link_to "Sign in", '#' %></li>
</ul>
</nav>
</header>
Here is the source code generated by Chrome:
<body>
<div class="container">
<header>
<img alt="Sample app" class="round" src="/assets/logo.png" />
<nav class = "round">
<ul>
<li> Home</li>
<li> Help</li>
<li> Sign in</li>
</ul>
</nav>
</header>
<section class ="round">
<h1>KHEMS</h1>
<p>
This is the home page for Khems - A Micro blogging App. It is similar to Twitter.
</p>
Sign up now!
</section>
<footer>
<nav class = "round">
<ul>
<li> About</li>
<li> Contact</li>
<li> Git Repo</li>
<li> Rails Tutorial</li>
</ul>
</nav>
</footer>
</div>
</body>
Source code generated by Firefox:
<body>
<div class="container">
<header>
<img alt="Sample app" class="round" src="/assets/logo.png" />
<nav class = "round">
<ul>
<li> Home</li>
<li> Help</li>
<li> Sign in</li>
</ul>
</nav>
</header>
<section class ="round">
<h1>KHEMS</h1>
<p>
This is the home page for Khems - A Micro blogging App. It is similar to Twitter.
</p>
Sign up now!
</section>
<footer>
<nav class = "round">
<ul>
<li> About</li>
<li> Contact</li>
<li> Git Repo</li>
<li> Rails Tutorial</li>
</ul>
</nav>
</footer>
</div>
</body>
I think part of the problem is that you have this CSS definition:
nav {
float: right;
background: white;
padding: 0 0.7em;
white-space: nowrap;
margin-top: -5.4em;
margin-left: -0.4em;
}
Which is being applied to BOTH your nav in your <header> and in your <footer>. I would remove margin-top: -5.4em; completely and then change this CSS definition:
footer {
text-align: center;
width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 100px;
}
by updating margin-top: 100px; to something like margin-top: 20px; and see if you have any better luck.