I have a navpar made by css but when show the navbar sub menu it pushes the content underneath down
This is a link to codepen with full code
https://codepen.io/muhamedhashem/pen/GqNQaE
image
html
<!DOCTYPE html>
<html>
<head>
<title> </title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<div class="nav">
<ul>
<li>One</li>
<li>
<a href="#">
Two
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Two #1</li>
<li>Two #2</li>
<li>Two #3</li>
</ul>
</li>
<li>
<a href="#">
Three
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Three #1</li>
<li>Three #2</li>
<li>Three #3</li>
</ul>
</li>
<li>
<a href="#">
Four
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>#1</li>
<li>#2</li>
<li>#3</li>
<li>#4</li>
</ul>
</li>
<li>
<a href="#">
Five
<i class="fa fa-arrow-circle-down"></i>
</a>
<ul>
<li>Five #1</li>
<li>Five #2</li>
<li>Five #3</li>
</ul>
</li>
</ul>
</div>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
<h1> ghjgjh ftfytf fytftyt drdtr rdetrert retretr ee45e ertetr rdrttr retret tdret </h1>
</body>
</html>
css
.nav {
width:900px;
margin: 0 auto}
ul{
margin: 0;
padding: 0;
list-style-type:none;
text-align:center;}
ul li{
float:left;
width:180px;}
li ul{ display:none;}
li:hover ul{
display:block;}
ul li a{
display:block;
padding: 5px 15px 5px 15px;
background:#69F;
color:#ffffff;
border-top: 1px solid #FFF;
margin-left:1px;}
ul li a:hover{
background:#F80;
color:#fff}
h1 {
clear:both;
}
This is because the navbar itself is growing in height. If you want the navbar to overlap the content, look into z-index and absolute display.
li:hover ul{
position:absolute;
z-index: 10; //can be any number higher than the content's z-index.
width: 180px; //This controls the size of the dropdowns container
display:block;
}
Your sub-menu needs to be set to position absolute and your parent LI needs to be set to position relative. You should set visibility to hidden and then show it for :hover. This method will not push down content.
Also, you need to make sure that you set a width to the ul li ul <--- submenu.
Related
I have a little problem with my vertical navigation:
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
...
</div>
My CSS:
.menu-container a{
text-decoration:none;
color:black;
}
.menu-container a:hover{
font-weight:bold;
}
.menu-container li:hover > .sub-menu{
display:block;
}
.sub-menu{
display:none;
list-style-type:none;
padding:6px;
}
ul.sub-menu a{
text-decoration:none;
}
.menu-container > ul.sub-menu a{
display:block;
background:#ddd;
}
.menu-container > .sub-menu:active{
display:block;
background:#ddd;
}
If I hover the menu the sub-menu show up. Now, in addition I would like, that if e.g. the submenu1 is active that the whole submenu stays openend. Can I realize that with CSS?
Greets,
Yab86
Here's an example using PHP. You need to create a page variable before the <html> like this:
<?php $page = 'menu1'; ?>
<html>
<!-- rest of HTML below here-->
That php code gets put on top of every submenu page that shares a common main parent menu. So in your example, submenu1, submenu2, and submenu3 would have the same variable. In this example, menu1. What this does, is allows you to add a CSS class of current to the submenu parent ul.
Here's the HTML with the PHP in place:
<?php $page = "menu1"?>
<html>
<head></head>
<body>
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu <?php if($page == 'menu1')echo 'current'; ?>">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2
<ul class="sub-menu <?php if($page == 'menu2')echo 'current'; ?>">
<li>Submenu4</li>
<li>Submenu5</li>
<li>Submenu6</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
And here's the CSS that would keep it open:
.menu-container li:hover > .sub-menu,
.menu-container .current {
display:block;
}
When the HTML outputs to the browser, this is what it would actually look like if you were on any of the submenu1,2,3 pages:
<div class="menu-container">
<ul>
<li>Menu1
<ul class="sub-menu current">
<li>Submenu1</li>
<li>Submenu2</li>
<li>Submenu3</li>
</ul>
</li>
<li>Menu2
<ul class="sub-menu">
<li>Submenu4</li>
<li>Submenu5</li>
<li>Submenu6</li>
</ul>
</li>
</ul>
</div>
Hopefully this helps you out.
I am trying to create a dynamic unordered list that is built for 3 list items however there maybe either one or two items in that list. My problem is that when there are one or two items in UL my contents get shifted up. How can I avoid this ?
HTML:
<html><head>
<title>Dashboard</title>
</head>
<body>
<div id="wrapper">
<div id="colDow">
<div id="colLef">
<ul id="days">
<div id="colRig">
<ul class="format" id="schedule1">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
<ul class="format" id="schedule2">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
<ul class="format" id="schedule3">
<li> Event 3</li>
<li>test this space</li>
<li>fit everthing and beyond</li>
</ul>
</div><!-- Bottom Right Time -->
</div>
</div>
CSS:
body {
padding:0;
margin:0;
background-color:#000;
font-size:100%;
}
#wrapper {
margin-left:auto;
margin-right:auto;
width:100%;
height:100%;
max-width:2560px;
max-height:1440px;
}
#colDow {
width:55.46%;
/* 710/1280 */
float:left;
height:88.75%;
/* 710/800 */
}
#colLef {
width:35.21%;
/* 250/710 */
float:left;
height:100%;
}
#days {
list-style-type:none;
padding-left:0px;
}
#days li {
font-size:2.25em;
color:#fff;
font-family:'Lato',sans-serif;
font-weight:lighter;
margin:0 0 168px;
background:#575757;
display:block;
text-align:center;
height:40px;
margin-top:6px;
margin-bottom: 168px;
}
#colRig {
/* background:#fff; */
width:63.09%;
float:right;
height:100%;
}
.format {
/* background:red; */
margin-top: 46px;
padding-bottom: 6px;
}
.format li {
color:#fff;
font-family:'Lato',sans-serif;
font-weight:lighter;
font-size:1.5em;
/* font-size: 1.846em; */
height: 52px;
}
If you remove the first occurrence of "Event3" items get shifted up
markup
<div class="event-listing">
<ul>
<li>
<a>List 1</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
<li>
<a>List 2</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
<li>
<a>List 3</a>
<ul>
<li>
<a>Event 3
</a>
</li>
<li>
<a>test this space
</a>
</li>
<li>
<a>fit everything and beyond
</a>
</li>
</ul>
</li>
</u>
</div>
css
.event-listing ul li {
list-style: none;
}
This is what i understood from your menu. Let me know if im wrong
.event-listing ul {
min-height: 100px //set a minimum height
}
Set a minimum height so your list areas won't get shifted up. Sorry code not in tags. I'm mobile right now.
this is my html code:-
<div id="load">
<ul>
<li>Activities
<div>
<ul>
<li>Physical1
<div>
<ul>
<li>Cricket
<div>
<ul>
<li>One Day</li>
</ul>
</li>
</ul>
</li>
<li>Test1
<div>
<ul>
<li>Test At Abc</li>
</ul>
</li>
<li>Test2
<div>
<ul>
<li>Test At Xyz</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
this is my css:-
li{
color:red;
border-left:1px solid green;
}
li{
list-style:none;
}
ul > li > div > ul {
display: none; // hide all submenus
}
li:hover > div > ul {
display: block; // show sub menu when parent li is hovered
}
now i want to something this type of my list:-
i think using proper position css style its done.
or with float i think its possible.
any kind help well come...
thanks...
I have a problem with my navigation bar. When loading the page, sometimes it changes to look like its in steps however when you refresh it changes back to normal. I cant seem to find out what im doing wrong! Please help!!
Website is http://www.pearsonfoods.com.au
<div id="nav">
<a href="index.html" >
<div class="navBlock" style="color:red;"><p>Home</p>
</div>
</a>
<a href="about.html">
<div class="navBlock"><p>About us</p>
</div>
</a>
<a href="where.html">
<div class="navBlock"><p>Where we sell</p>
</div>
</a>
<a href="foods.html">
<div class="navBlock"><p>Our Foods</p>
</div>
</a>
<a href="contact.php">
<div class="navBlock"><p>Contact us</p>
</div>
</a>
</div>
Your markup is not well-formed. <a> is an "inline element" and <div> is a "block element". Block elements cannot exist within inline elements.
Your navigation list is better structured as a simple unordered list:
<ul>
<li>Home</li>
<li>About us</li>
<li>Where we sell</li>
</ul>
See? So much cleaner :)
Style each <li><a> as a block-flow element with display: block; (note this does not affect the inline/block semantics of elements, it's strictly a visual thing) and apply float: left; to the <li> elements.
html
<ul class="nav">
<li class="current">Home</li>
<li> About Us</li>
<li> Where we sell</li>
<li> Our Foods</li>
<li> Contact Us</li>
</ul>
css
.nav {
width: 900px;
margin: 0 auto;
}
.nav li {
background-color: rgba(0, 0, 0, 0.72);
border-radius: 10px 10px 0px 0px;
width: 180px;
float:left;
}
.nav li a{
color:#fff;
text-decoration:none;
text-align:center;
line-height:50px;
display:block;
}
.nav li a:hover,.nav li.current a{
color:red;
}
Link to running example
I have a problem with my menu. I only want four menu items to appear at any time, meaning that if there’s an overflow, it’ll be clipped, and the user will have to scroll down.
I tried setting overflow-y, hoping to see it get clipped, but instead, a horizontal scroll bar appears.
HTML
<link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/screen.css' type="text/css" media="screen, projection" />
<link rel="stylesheet" href='http://donysukardi.com/ltw/css/blueprint/print.css' type="text/css" media="print" />
<div class="container">
<div id="menu">
<ul>
<li>profile
<ul>
<li>overview</li>
<li>partners
<ul>
<li>Lim Hong Lian</li>
<li>Teo Su Seam</li>
<li>Marina Baracs</li>
</ul>
</li>
<li>associates
<ul>
<li>Jocelyn Yang Liwan</li>
<li>Tsai Ming Ming</li>
</ul>
</li>
<li>team</li>
</ul>
</li>
<li>projects
<ul>
<li>featured projects
<ul>
<li>HELLO</li>
</ul>
</li>
<li>project list
<ul>
<li>current
<ul>
<li>all</li>
<li>urban</li>
<li>resort</li>
<li>spa</li>
<li>restaurant</li>
<li>others</li>
</ul>
</li>
<li>completed</li>
</ul>
</li>
</ul>
</li>
<li>publications
<ul>
<li>books</li>
<li>magazines</li>
</ul>
</li>
<li>contacts
<ul>
<li>Singapore</li>
<li>Milan</li>
<li>Beijing</li>
</ul>
</li>
</ul>
</div>
</div>
CSS
#menu ul
{
list-style-type:none;
position:absolute;
padding: 5px 0px;
margin:0px;
width:100px;
}
#menu
{
position:relative;
border-top-color:#afafaf;
border-top-style:solid;
border-top-width: thin;
font-size: 11px;
margin-top:5px;
height:80px;
}
#menu ul ul
{
display:none;
position:absolute;
padding:5px 0px;
left:150px;
top:0px;
height:80px;
}
Javascript (jQuery)
$(document).ready(function(){
$('#menu ul li a').click(function(){
if(!$(this).hasClass('current'))
{
var relatives = $(this).parent().siblings();
relatives.find('ul').css('left',150).hide();
relatives.find('.current').removeClass('current');
$(this).siblings().animate({'left':'-=20', 'opacity':'toggle'},'slow');
$(this).addClass('current');
if($(this).attr("href") != "#"){
var url = $(this).attr("href").split('#!')[1];
$('#content').slideUp('slow', function(){$(this).load(url, function(){$(this).slideDown('slow')});})
window.location = base_url+url;
}
}
$(this).parent().siblings().find('.black').removeClass('black');
$(this).addClass('black');
return false;
});
})
Demo on JS Fiddle.
Here is a screenshot: I only want “all”, “urban”, “resort”, and “spa” to appear initially.
Not sure you can limit the number of elements, but you can set the height and set the overflow to auto, so if it's higher then specified width there will be a scrollbar.
<ul class="inner-ul">
<li>all</li>
<li>urban</li>
<li>resort</li>
<li>spa</li>
<li>restaurant</li>
<li>others</li>
</ul>
.inner-ul {
height:50px;
overflow-y: auto;
}
Hard to tell from the question and fiddle (and I can't see the image) but I think you need
overflow-x: auto;
Here's a good resource for overflow: http://www.brunildo.org/test/Overflowxy2.html
Change height to 70px and add "overflow:auto;" to your menu css statement