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
Related
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.
I have a question about my sitemap if you look at the code you see ul and li. But every UL is below the other and i want it to be side by side. Every new UL side by side. How doe i do this? Working with first-child? ( the sitemap is inside my )
Sitemap
<ul>
<li>Opleiding</li>
<ul>
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul>
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul>
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul>
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
This is my CSS
footer{
width: 100%;
position: absolute;
top: 317%;
left: -10%;
background: lightgrey;
margin:10%;
padding: 2%;
}
Try display inline-block or float left on the ul's you want side by side. I recommend adding classes to make the styling easier
HTML:
<ul>
<li>Opleiding</li>
<ul class="sitemap">
<li>Visie & Beleid</li>
<li>Opbouw Studieprogramma</li>
<li>Competenties</li>
<li>Diploma</li>
<li>Beroepen</li>
</ul>
<li>Onderwijsprogramma</li>
<ul class="sitemap">
<li>Mededelingen</li>
<li>Uitagenda</li>
<li>Propedeuse</li>
<li>Verdieping 1</li>
<li>Verdieping 2</li>
<li>Afstuderen</li>
</ul>
<li>Organisatie</li>
<ul class="sitemap">
<li>Contact</li>
<li>Blog</li>
<li>Docenten</li>
<li>Onderwijsbureau</li>
<li>Stagebureau</li>
<li>Buitenlandbureau</li>
<li>Examencommissie</li>
<li>Decaan</li>
</ul>
<li>Stages en Projecten</li>
<ul class="sitemap">
<li>Stages</li>
<li>Projecten</li>
</ul>
</ul>
CSS:
footer .sitemap {
display: inline-block;
OR
float: left;
}
Well, for starters your markup is invald. If you want to nest ULs inside of another UL, it needs to be inside of an LI
<ul>
<li>Title
<ul>
<li>Sub-Title</li>
</ul>
</li>
</ul>
From there, you probably just need something like this:
footer > ul > li {
float:left;
width:50%;
}
http://jsfiddle.net/fTCY5/
I've created a drop-down navigation with CSS only.
If I hover the button and the submenu comes out.
But then the body will be higher.
I don't want that the body will be higher.
Here the files:
http://jsfiddle.net/UHQV5/
I think the position: relative; is false.
How about this one?
added this:
nav ul ul{
position: absolute;
margin-left: -10px;
}
and removed some unnecessary ones.
jsFiddle
Nice looking website,
I messed with the code just a little and found the making the tag have a id for the css. Then in the css setting the postion to fixed!
The Code:
From this
<nav>
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
To This
<nav id="nav">
<ul id="navigation">
<li>Home</li>
<li>Bücher...»
<ul>
<li>für kleine Leser</li>
<li>für große Leser</li>
<li>Schulbücher</li>
</ul></li>
<li>und mehr...»
<ul>
<li>Filme</li>
<li>Ebooks</li>
</ul></li>
<li>Seit 1851»
<ul>
<li>Firmenhistory</li>
</ul></li>
</ul>
</nav>
And then in the css just put in:
#nav {
postion: fixed;
}
I currently have a side menu. I'd like it if the user hovers over the Manage Contracts button the sub menu then appears. I've created two ul's - the primary menu and a sub menu ul. The reason being because I don't want the sub menu inheriting the styles from the primary menu if that makes sense? However at the moment I can't get the the menu to appear when the mouse is over the Manage Contract button. Any ideas?
the html:
<div id="navbar-side">
<div id="profile-image">
</div>
<div id="menu-search">
<input type="text" name="search" id="search" placeholder="Search..." />
</div>
<ul id="side-menu">
<li>Dashboard</li>
<li>Manage Contracts</li>
<li>Manage Duplicates</li>
<li>PPM Manager</li>
<li>Service User Search</li>
<li>My Subscriptions</li>
<li>Help Centre</li>
</ul>
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</div>
the css:
#side-menu
{
width:100%;
position:relative;
}
#side-menu li
{
display:block;
border-bottom:solid 1px black;
}
#side-menu a
{
display:block;
border-top:solid 1px white;
padding:18px 0;
}
#side-menu a:hover
{
background-color:Silver;
}
#contracts-menu
{
display:none;
width:200px;
height:300px;
background-color:Aqua;
margin-left:228px;
position:absolute;
top:87px;
}
#contracts-menu li
{
display:block;
}
#contracts-menu a
{
display:block;
}
a#contracts:hover + #navbar-side ul#contracts-menu
{
display:block;
}
That's because a#contracts and div#navbar-side are not siblings!
You can't use + and/or ~ selectors on non-sibling elements.
On the other hand, there's no parent selector in CSS (yet).
You could use JavaScript to achieve this or change your markup structure, as follows:
<li>Manage Contracts
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</li>
CSS:
a#contracts:hover + ul#contracts-menu {
display:block;
}
JSBin Demo.
Update
But in this case, There's no need to set id attriute on each link/item.
You could nest the sub-menus in each list item and display them as follows:
#side-menu li:hover > ul { /* Select the ul children inside each list-item */
display:block;
}
JSBin Demo #2
If you don't want to use javascript, you could put the ul#contracts-menu inside the list-item that contains the #contracts anchor:
<div id="navbar-side">
<div id="profile-image">
</div>
<div id="menu-search">
<input type="text" name="search" id="search" placeholder="Search..." />
</div>
<ul id="side-menu">
<li>Dashboard</li>
<li id="contracts">
Manage Contracts
<ul id="contracts-menu">
<li>General</li>
<li>Settings</li>
<li>Communication</li>
<li>Contract Details</li>
<li>Retail Setup</li>
</ul>
</li>
<li>Manage Duplicates</li>
<li>PPM Manager</li>
<li>Service User Search</li>
<li>My Subscriptions</li>
<li>Help Centre</li>
</ul>
</div>
Add the id to the list item (instead of the anchor) and then add:
#side-menu li.contracts:hover #contracts-menu { display:block; }
See: http://jsfiddle.net/FmR3f/
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.