The problem I encounter is that I want the nav to expand when I click on a button, but what it now does is that it looks like it kinda float above the rest. Or that it is another div that is created underneath it.
For a clearer understanding of what is happening I would recommend that you run the snippet, because it is hard for me to explain what really happens.
This problem is only relative for the mobile menu.
I also use the bootstrap css, but that onlt effects <div class="container">.
The things I already tried to fix the problem are:
Removed the bootstrap css
Changed the <nav> to a div element
Changed all the positions to relative
Changed somethings about the float
So this are the most important parts of the code I use.
/*JS for the hide/show of the menu*/
$(document).ready(function() {
$(".menu-trigger").click(function() {
$(".menu").slideToggle(400, function() {
$(this).toggleClass("nav-expanded").css('display', '');
});
});
});
/*JS for the dropdown in the menu*/
$(document).ready(function () {
$("li").click(function () {
$('li > ul').not($(this).children("ul").slideToggle()).hide();
});
});
body{
background-color: white;
}
.container{
background-color: #919191;
box-shadow: 0px 0px 2px black;
}
nav {
background: #7D7D7D;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
color: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
height: 40px;
margin: 2px 10px;
}
nav ul, li, a {
margin: 0;
padding: 0;
}
nav a, a:link, a:visited, a:hover{
text-decoration: none;
color: white;
display: block;
}
ul > li {
list-style: none;
float: left;
}
ul > li a {
color: #fff;
font-weight: bold;
line-height: 40px;
height:40px;
display:block;
padding:0px 10px;
}
nav ul li a:hover{
border-radius: 4px;
background: #666666;
display: block;
}
nav ul li ul {
background: #333333;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
display: none;
position: absolute;
z-index:100;
}
nav ul li ul li {
float: none;
line-height: 40px;
width: 150px;
}
.menu-trigger{
display: none;
}
.burger{
background-color: white;
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin: 5px auto;
}
#media screen and (max-width: 760px){
.menu-trigger{
display: block;
background-color: #BFBFBF;
border-radius: 4px;
box-shadow: 0px 0px 2px #303030;
height: 35px;
padding: 5px 5px;
margin: 3px 10px;
width: 40px;
}
.nav-expanded{
display: block;
}
nav ul{
display: none;
background: #7D7D7D;
border-radius: 0 0 4px 4px;
}
nav ul li{
float: none;
padding: 0;
}
nav ul li:first-child{
margin-top: 5px;
}
nav ul li ul {
background: #7D7D7D;
box-shadow: none;
display: none;
position: relative;
z-index:0;
}
nav ul li ul li {
line-height: 35px;
width: 100%;
}
}
.active{
border-radius: 4px;
background-color: #404040;
}
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<title></title>
</head>
<body>
<div class="container">
<header>
<nav>
<button class="menu-trigger">
<span class="burger"></span>
<span class="burger"></span>
<span class="burger"></span>
</button>
<ul class="menu">
<li class="active">Link
</li>
<li>Link 2
</li>
<li class="dropdown-trigger">Dropdown<span class="caret"></span>
<ul>
<li>Link</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</li>
<li>Link 3
</ul>
</nav>
</header>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</body>
</html>
Thanks in advance for your help.
And if there are somethings unclear please ask and maybe I can make a clearer. Also if there is something wrong with the post I would like to hear it.
Check the DEMO here
You had a fixed height for "nav" that was 40px with border radius 4px, which was making it not to expand and look like a separate element in itself even though the expanded list was inside it.
What you need to do is to give it an auto height, so that it has the height equal to the height of all the child elements together.
Check the demo, let me know if you wanted this only.
Related
I'm trying to copy a Sit the Test website, and got stuck in the border on the current page.
What I wanted is to make a border in Build test so it looks like a current page.
I have this HTML.
* {
text-decoration: none;
}
body {
background-color: #D9E0E6;
}
header {
height: 100px;
background-color: #323b44;
}
.web-logo img {
width: 300px;
height: 60px;
display: block;
float: left;
margin: 20px 0 0 30px;
}
nav {
float: right;
width: 600px;
text-align: right;
margin: 15px 30px 15px 0;
}
nav ul {
display: flex;
justify-content: center;
line-height: 60px;
text-align: center;
}
nav ul li {
flex: 1;
}
nav ul li a {
display: block;
font-family: catamaran, sans-serif;
font-size: 18px;
color: #f2f2f2;
border: 3px solid transparent;
}
nav ul li a.current {
/* I'm trying to make a border here on the current page which is the Build Test*/
border: 3px solid #80dbb8;
border-radius: 10px;
color: #80dbb8;
}
nav ul li a:hover {
border: 3px solid #80dbb8;
border-radius: 7px;
}
```
<header>
<div class="web-logo"><img src="img/logo-bd2b73d4287cc1b0b5d0562cbf409217.png" alt="Site the Test Logo"></div>
<nav id="nav">
<ul>
<li>Build Test</li>
<li>Browse Test</li>
<li>Help</li>
<li>Sign In</li>
</ul>
</nav>
</header>
does anyone can help?
These are for the design only I'm not working yet with the page transition.
when I hover around submenu , then when dragging cursor over submenu and hovering over the submenu disappers and only sometimes appear when I select any other nav menu and hover there but it only works sometimes.
Here is my 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;}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 35px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu" >
<li ><a href="#" >Home</a></li>
<li ><a ref="#" >Contact Us</a></li>
<li >
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
How can I solve this ..
Ay help is appreciated. I tried but I failed and Have no idea how to solve this.
Thanks in advance.
It's because there is a space between the "Dropdown" menu and the dropdown list. Instead of hard coding the margin in px use a percentage. I also recommend using top instead of margin-top. Replace .dropdown-content css with:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
top: 100%; //To move it up or down more you can use calc like: calc(100% + 1px) or calc(100% - 2px)
}
when you move the mouse from the dropdown menu toggle, into the submenu, you are briefly not hovering over the div due to the margin-top value of the submenu. If you really want that divide between the two add white top border (i.e. border-top: 2px solid white;).
Heres a JSFiddle
Change the CSS as follows:
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
Change the HTML as follows:
<li class="dropdown">
<div>
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
The issue is simply a gap between li.dropdown and .dropdown-content. It is worth noting that when you move the cursor quickly from the dropdown button to the dropdown list, it does not disappear. However, doing that slowly vanishes the list.
The simplest solution I could think of here is to decrease the top margin of the dropdown list, while adding a top padding to the first list item to compensate for that lost margin (a top margin won't work here). So, your code for the dropdown menu would look like this:
#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;
}
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
display: inline-block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
z-index: 1;
margin-top: 30px;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:first-child {
padding-top:17px;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="main">
<div id="menubar">
<ul id="menu">
<li>Home</li>
<li><a ref="#">Contact Us</a></li>
<li>
<div class="dropdown">
<a class="dropbtn">Dropdown</a>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>
</li>
</ul>
</div>
</div>
I have a header that has a transparent header and then when the user scrolls it changes to a white background. I need the nav bar text to change from white to grey when user scrolls as well but cannot get this to work. I'm not sure my code or css is particularly accurate either.
Thanks in advance.
Header HTML is
<div class="header">
<div class="topbar"></div>
<div class="sitelogo"></div>
<nav id="navigation">
<ul>
<li id="twitter"><em>Twitter</em></li>
<li>Contact</li>
<li>Blog</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</nav>
<div style="clear:both;"></div>
css code is
.header.active {
background: #fff;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
padding: 0;
z-index: 10000;
transition: all 0.2s ease-in-out;
height: auto;
background-color:transparent;
text-align: center;
line-height: 40px;
}
#navigation {
width:400px;
}
#navigation ul {
margin: 0px;
padding: 0px;
list-style-type: none;
float:left;
text-align:center;
}
#navigation ul a {
display: block;
width: 50px;
height: 18px;
float:left;
}
#navigation ul a em {
display: none;
width:50px;
}
#navigation ul li {
float: right;
height: 18px;
}
#navigation ul #twitter {
background-image:url(../images/twitter_sprite_small.png);
display: block;
width:18px;
float:right;
margin-left:20px;
opacity:0.4;
background-repeat:no-repeat;
}
#navigation ul #twitter:hover {
background-image:url(../images/twitter_sprite_small.png);
display: block;
background-position: 0px -18px;
background-repeat:no-repeat;
}
nav {
float:right;
margin-top: 40px;
margin-right:78px;
}
nav a {
display:inline-block;
margin-left:20px;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #676767;
text-decoration:none;
float:right;
}
nav a:hover {
display:inline-block;
margin-left:20px;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 17px;
color: #0171bd;
text-decoration:none;
}
JQuery
$(window).on("scroll", function() {
if($(window).scrollTop() > 1) {
$(".header").addClass("active");
} else {
//remove the background property so it comes transparent again (defined in your css)
$(".header").removeClass("active");
}
});// JavaScript Document
Thanks in advance
.header.active #navigation ul a{
color: grey;
}
Sorry if this topic has been discussed too much. I created a navigation menu that will appear on the screen when the vertical scroll 100px and I managed to make it out of the tutorial from the internet. however I found that there is a blank page on the right side of the screen by approximately 5 times the size of the current screen.
Here is the HTML:
<header>
<div>
<ul>
<li style='margin-left:30px;'><a href='index.php'>Beranda</a></li>
<li><a href='#'>Tutorial ▾</a>
<ul class='sub-menu'>
<li><a href='#'>CSS</a></li>
<li><a href='#'>HTML5</a></li>
<li><a href='#'>Javascript</a></li>
</ul>
</li>
<li><a href='#'>Web Design ▾</a>
<ul class='sub-menu'>
<li><a href='#'>Blogger Template</a></li>
<li><a href='#'>Menu Navigasi</a></li>
<li><a href='#'>Responsive Design</a></li>
<li><a href='#'>Codding</a></li>
</ul>
</li>
<li><a href='#'>About Us</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</header>
Here is the CSS:
header {
position: fixed;
top: 0;
display: none;
width: 100%;
margin: 0;
height: 30px;
background-color: rgba(238,238,238,0.8);
z-index:100;
font-family:'Oswald', Arial, sans serif;
-webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
-moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.49);
}
header ul, header ul ul.sub-menu {
padding:0;
margin: 0;
}
header ul li, header ul ul.sub-menu li, header ul ul.sub-menu ul.sub-sub-menu li {
list-style-type: none;
display: inline-block;
margin:0;
padding:0;
}
header ul li a {
padding:0 5px;
display: inline-block;
height: 30px;
text-align: left;
line-height: 30px;
text-decoration: none;
color:#333;
font-size:20px;
}
header li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li ul.sub-menu li a {
display: inline-block;
background: rgba(238,238,238,0.8);
color: #333;
height: 30px;
line-height: 20px;
font-size:14px;
font-weight:300;
min-width: 160px;
padding: 5px;
border-bottom: 1px solid #333;
}
header ul li ul.sub-menu li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li ul.sub-menu li ul.sub-sub-menu li a {
display: inline-block;
background: rgba(238,238,238,0.8);
color: #333;
height: 30px;
line-height: 20px;
font-size:14px;
font-weight:300;
min-width: 160px; padding: 5px;
border-bottom: 1px solid #333;
}
header ul li ul.sub-menu li ul.sub-sub-menu li:hover a {
color: #eee;
text-decoration:none;
background: #888;
}
header ul li {
position: relative;
}
header ul li ul.sub-menu {
display:none;
position: absolute;
top: 30px;
left: 0;
width: 100px;
}
header ul li:hover ul.sub-menu {
display: inline-block;
text-decoration: none;
font-weight:300;
}
header ul li ul.sub-menu li ul.sub-sub-menu {
display:none;
position: absolute;
top:0;
left: 100%;
width: 100px;
}
header ul li ul.sub-menu li:hover ul.sub-sub-menu {
display: inline-block;
text-decoration: none;
font-weight:300;
}
Here is the JS:
$(window).scroll(function () {
if ( $(this).scrollTop() > 100 && !$('header').hasClass('open') ) {
$('header').addClass('open');
$('header').slideDown();
} else if ( $(this).scrollTop() <= 100 ) {
$('header').removeClass('open');
$('header').slideUp();
}
});
I want to ask, if there are any errors in the CSS that I made?
Thank you for your help.
* sorry I was not very good at speaking English
It looks as though it works in this fiddle. I just added a declaration of body height like this:
body {
height: <any height greater than 100px>;
}
I think maybe a bit more info is needed to see what you are talking about. Do you have this page live somewhere? Even a slightly more complete picture of the html that you are working with. I can't see the 'blank area' you are talking about here.
I'm trying to create a simple menu pop-up effect using anchors within a div and unordered lists.
I want the html to look something like this:
<div class="info">
Link |
<a onclick="menu('id1');">Another Link</a>
<ul id="id1" class="submenu">
<li>Stuff</li>
<li>Other</li>
<li>Hooray</li>
</ul>
</div>
Here is my javascript [pretty simple, not the problem, i don't think]:
function menu(id) {
var myLayer = document.getElementById(id);
if (myLayer.style.display == "none" || myLayer.style.display == "") {
myLayer.style.display = "block";
} else {
myLayer.style.display = "none";
}
}
The css is I believe where the problem is:
.info ul .submenu
{
border: solid 1px #000;
border-top: none;
background: #FFFFFF;
position: relative;
top: 4px;
width: 150px;
padding: 6px 0;
clear: both;
z-index: 2;
display: none;
}
.info ul .submenu li
{
background: none;
display: block;
float: none;
margin: 0 6px;
border: 0;
height: auto;
line-height: normal;
border-top: solid 1px #00ff00;
}
.info .submenu li a
{
background: none;
display: block;
float: none;
padding: 6px 6px;
margin: 0;
border: 0;
height: auto;
color: #ff0000;
line-height: normal;
}
.info .submenu li a:hover
{
background: #0000ff;
}
I don't really know how to create the css on the ul so that if appears over the underlying text. I can't get it in the right spot.
I just want to click the <a> tag and a menu will pop up directly below the <a> tag.
I cleaned up your CSS:
.info ul.submenu
{
border: solid 1px #000;
border-top: none;
background-color: #fff;
position: relative;
top: 4px;
width: 150px;
padding: 6px 0px 0px 0px;
z-index: 2;
display: none;
}
.info ul.submenu li
{
display: block;
border: none;
border-top: solid 1px #00ff00;
}
.info ul.submenu li a
{
display: block;
padding: 6px 0px 6px 4px;
color: #ff0000;
}
.info ul.submenu li a:hover
{
background: #0000ff;
}
Let me know if the problem is still there. Like I said earlier, I don't see "a"'s moving on show/hide.
EDIT: Ok. I'm much more stronger with jQuery as oppose to plain javascript. If you cannot use jQuery for whatever reason, I have to leave it up to you to perform the same with plain js. Sorry!
HTML:
<ul class="root">
<li>
<div class="menuHeader">Something 1</div>
<ul class="parent">
<li>asdf 1.1</li>
<li>asdf 1.2</li>
<li>asdf 1.3</li>
</ul>
</li>
<li>
<div class="menuHeader">Something 2</div>
<ul class="parent">
<li>asdf 2.1</li>
<li>asdf 2.2</li>
<li>asdf 2.3</li>
</ul>
</li>
<li>
<div class="menuHeader">Something 3</div>
<ul class="parent">
<li>asdf 3.1</li>
<li>asdf 3.2</li>
<li>asdf 3.3</li>
</ul>
</li>
</ul>
CSS:
.info ul.root > li
{
width: auto;
float: left;
border:solid 1px blue;
padding:5px;
}
.info ul.parent
{
padding:0px;
display:none;
}
.info .menuHeader
{
cursor:pointer;
}
.info li
{
list-style: none;
}
Javascript (utilizing jQuery):
$(document).ready(function() {
$('.menuHeader').click(function(event) {
$('.parent').hide();
$(this).siblings('.parent').show();
});
});
I included only the functional kind of stuff in the CSS. Obviously, you need different look, so you may play with colors on your own. Let me know if you have more questions.
Try:
ul .submenu ==> ul.submenu
in the css.
I have made a couple of changes to ur css -
i am directly refering to submenu class
.submenu
{
list-style: none;
display: none;
border: solid 1px #000;
border-top: none;
background: #FFFFFF;
position: relative;
top: 4px;
margin:0;
padding: 0 5px;
width: 150px;
clear: both;
z-index: 2;
}
.submenu li
{
background: none;
display: block;
float: none;
margin: 0 6px;
border: 0;
height: auto;
line-height: normal;
border-top: solid 1px #00ff00;
}
.submenu li a
{
background: none;
display: block;
float: none;
padding: 6px 6px;
margin: 0;
border: 0;
height: auto;
color: #ff0000;
line-height: normal;
}
.submenu li a:hover
{
background: #0000ff;
}