I have a 2-level CSS dropmenu menu working nicely - taken from the web.
I'm pretty new to CSS and tried to mod it to work with 3-levels but unfortunately I failed...
Screen shot of my 3rd level menu fail:
http://i1280.photobucket.com/albums/a498/paul1234562/menu-screen_zpsb180cdfa.jpg
Update: note the third-level menu is supposed to display to the right of its parent menu, not over it and the other sub-menus.
You can see the menu here:
http://etfsage.ca/test/
Under 'Canada Equity', I wanted the 'Broad Market' submenu to display the third level menu options when the mouse hovers over 'Broad Market'.
If some CSS Guru could help me get this working I would hugely appreciate it.
The HTML code is:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<meta name="robots" content="noindex, follow">
<meta name="description" content="">
<meta charset="UTF-8">
<title>Test Menu</title>
</head>
<body>
<!-- Display Main Menu !-->
<nav class="cf">
<nav class="cf">
<!-- menu nav -->
<ul class="topmenu">
<!-- Home -->
<li class="topmenu">Home</li>
<!-- Canada Equity ETF -->
<li class="topmenu">Canada Equity <img src="/etf-images/down-arrow.jpg">
<ul class="submenu">
<li>Broad Market</li>
<ul class="sub-submenu">
<li> +++Third level menu option #1</li>
<li>+++Third level menu option #2</li>
<li>+++Third level menu option #3</li>
</ul>
<li>Sector Specific</li>
<li>REITs (Real Estate Investment Trusts)</li>
<li>Mid-Cap and/or Small-Cap</li>
<li>Minimum Volatility</li>
</ul>
</li>
<!-- USA Equity ETF -->
<li class="topmenu">USA Equity <img src="/etf-images/down-arrow.jpg">
<ul class="submenu">
<li>Broad Market</li>
<li>NASDAQ</li>
<li>Small Cap</li>
<li>Sector Specific</li>
<li>Minimum Volatility</li>
<li>High Beta</li>
<li>Actively Managed: USA Equity</li>
</ul>
</li>
</ul>
</nav>
</nav>
</body>
</html>
The CSS code is:
#charset "utf-8";
/* CSS Document */
html {
background: #E6E3D4;
}
body {
font: 100% Georgia, "Times New Roman", Times, serif;
line-height: 1.2; /* */
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
zoom:1;
}
/* START top level menu: topmenu - works great */
/* START top level menu: topmenu - works great */
/* START top level menu: topmenu - works great */
ul.topmenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
background: #006da6;
height: 2em;
width: 100%;
font: 100% Georgia, "Times New Roman", Times, serif;
font-size: 0.95em;
}
li.topmenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
position: relative;
}
/* ul.sub-submenu defined - newly added as part of my third level menu mod */
/* ul.submenu defined - works great */
/* ul.topmenu defined - great great */
ul.sub-submenu, ul.submenu, ul.topmenu li a {
display: block;
line-height: 1.8em;
padding: 0 1em;
color: white;
text-decoration: none;
z-index:3;
}
ul.topmenu li a:hover, ul.topmenu li:hover > a {
background: #035c7c;
height: 1.8em;
padding-top: .3em;
position: relative;
top: -.3em;
border-radius: .3em .3em 0 0;
text-decoration: none;
}
ul.current, a:hover.current, ul.topmenu li:hover a.current {
background: #AD9B7F;
background: yellow;
color: #eee;
padding-top: .3em;
border-radius: .3em .3em 0 0;
position: relative;
top: -.3em;
border-bottom: .3em solid #917F63;
cursor: default;
}
ul.topmenu li:hover ul {
left: 0;
}
/* END top level menu: topmenu - works great */
/* END top level menu: topmenu - works great */
/* END top level menu: topmenu - works great */
/* START level 2: submenu ... works great */
/* START level 2: submenu ... works great */
/* START level 2: submenu ... works great */
ul.submenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
height: 1.8em;
width: 100%;
float: none;
background: #035c7c;
background: pink;
width: auto;
height: auto;
position: absolute;
top: 1.8em;
left: -9000em;
}
ul.submenu li {
float: none;
}
ul.submenu li a {
border-bottom: 1px solid white;
padding: .2em 1em;
white-space: nowrap;
}
ul.submenu li:last-child a {
border-bottom: none;
}
ul.submenu li a:hover {
background: #15afcb;
background: red;
height: 1.8em;
padding-top: .2em;
top: 0;
border-radius: 0;
text-decoration: none;
}
/* END level 2: submenu ... works great */
/* END level 2: submenu ... works great */
/* END level 2: submenu ... works great */
/* START level 3: attempted to add Level 3: called it sub-submenu */
/* START level 3: attempted to add Level 3: called it sub-submenu */
/* START level 3: attempted to add Level 3: called it sub-submenu */
ul.sub-submenu {
margin: 0;
padding: 0;
list-style: none;
float: left;
height: 1.8em;
width: 100%;
float: none;
background: #035c7c;
width: auto;
height: auto;
position: absolute;
top: 1.8em;
left: -9000em;
}
ul.sub-submenu li {
float: none;
}
ul.sub-submenu li a {
border-bottom: 1px solid white;
padding: .2em 1em;
white-space: nowrap;
}
ul.sub-submenu li:last-child a {
border-bottom: none;
}
ul.sub-submenu li a:hover {
background: #15afcb;
background: brown;
height: 1.8em;
padding-top: .2em;
top: 0;
border-radius: 0;
text-decoration: none;
}
/* END level 3: sub-submenu */
/* END level 3: sub-submenu */
/* END level 3: sub-submenu */
I believe this is not possible with pure CSS... See here. You can't reference CSS elements through CSS.
What you can do though is use Javascript and dynamically apply the styling needed. For your scenario, I set display: none to your class sub-submenu and then added a JS script so that on hover, it would find any uls inside and show them. I also moved your sub-submenu into the li.
Working jsFiddle here: http://jsfiddle.net/8kvcN/1/
Easiest way is using jQuery rather than css do the interaction.
You can see the DEMO here.
Here is the code of jQuery.
$('.submenu li a:first').hover(function(){
$('.sub-submenu').show();
},
function(){
$('.sub-submenu').hide();
});
Related
If you view twoguysplayingzelda.com on a mobile device, you will notice that my sub-menus are displayed. This makes the menu way too long. I would like to hide these and make them a dropdown (with a "+" symbol showing there is a dropdown). So you would click on games, then click on which game you wanted, and then see the options for each game. I just can't figure this one out. My CSS is below. Thanks for your help!
#media (max-width: 1000px) {
/* navigation */
.main-menu { display: none; }
.search-toggle { width: 24px; }
.nav-toggle {
display: block;
padding: 25px 0;
}
.nav-toggle .bar {
display: block;
width: 26px;
height: 3px;
margin-top: 5px;
background: #8E8E8E;
border-radius: 1px;
}
.nav-toggle .bar:first-child { margin-top: 0; }
.nav-toggle:hover { cursor: pointer; }
.nav-toggle.active .bar { background: #fff; }
.mobile-menu li { border-top: 1px solid rgba(255,255,255, 0.1); }
.mobile-menu > li:first-child { border-top: none; }
.mobile-menu a {
display: block;
padding: 25px 5%;
font-size: 0.9em;
text-transform: uppercase;
color: #999;
letter-spacing: 1px;
}
.mobile-menu a:hover { color: #fff; }
.mobile-menu ul a { padding-left: 10%; }
.mobile-menu ul ul a { padding-left: 15%; }
.mobile-menu ul ul ul a { padding-left: 20%; }
.mobile-menu ul ul ul ul a { padding-left: 25%; }
.mobile-menu ul ul ul ul ul a { padding-left: 30%; }
}
You could try jQuery mobile collapsible menus: http://demos.jquerymobile.com/1.4.0/collapsible/
I've also found a css-based solution here that might work for you: Pure CSS collapse/expand div.
Otherwise, if you want to go with the jquery mobile route, make sure the <head> tag in your html file looks something like this:
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
These urls in script and link will allow you to pull the jQuery mobile code automatically without you needing to download any files/code and add them to your project explicitly. Then, within your body tag, add a div to wrap around the entire page, like this:
<div data-role = "page">
...
</div>
Then, you can add collapsible lists to your page, within that data-role = "page" div, like so:
<div data-role="collapsible">
<h4>Heading</h4>
<ul data-role="listview">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
</div>
Great tutorials you can look at for jQuery mobile:
https://www.tutorialspoint.com/jquery_mobile/jquery_mobile_setup.htm
http://demos.jquerymobile.com/1.4.0/collapsible/#&ui-state=dialog
I've been trying to get multiple background images on my page but I couldn't get more than 2, so I started to think that I might use divs instead. But when I use divs I got like 5 white pixels left at the top and and sides of the screen, that was until I changed the position to absolute but then my navbar was stuck behind the div... If anyone could please help me fixing my issue.
My code isn't that good, but this is what I have at the moment:
#P1Tekstvlak1_1 {
background-image: url("DakB1.jpg");
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
}
/** — Navbar —*/
#nav {
color: FFFFFF;
opacity: 0.9;
}
#nav_wrapper {
width: auto;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: fixed;
min-width: 200px;
text-align: center;
background-color: #B50B26;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
color: white;
text-align: center;
text-shadow: 1px 1px 1px #FFFFFF;
}
#nav ul li a,
visited {
color: #FFFFFF;
font-size: 20px;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home</li>
<li>Over</li>
<li>Renovatie</li>
<li>Nieuwbouw</li>
<li>Vacatures</li>
<li>WKA</li>
<li>Contact</li>
</ul>
</div>
</div>
Remove the absolute positioning and then apply a CSS reset like the one here . Browsers have some styling attributes it applies by default for accessibility purposes. You should remove them. I do this before starting to build any web UI.
Note: Absolute positioning will stack elements versus applying layout to them. That is why you are seeing it behind your NAV
All,
I have been scratching my head for well over two hours now and I just cannot see whats wrong with the code.
I am building a liquid layout with two navigation bars at the top. The first one is sitting well but the second one (id="filem_right") refuses to sit alongside it.
Here is the HTML:
<body id="container">
<div id="main_bar">
<ul>
<li class="maintabs">Overview</li><li class="maintabs">Collar/ Neckline</li><li class="maintabs">Sleeves
<ul>
<li class="s_leftright">Left Sleeves</li>
<li class="s_leftright">Right Sleeves</li>
</ul></li><li class="maintabs">Body</li>
</ul>
</div>
<div id="filem_right">
<ul>
<li class="filetabs">File</li><li class="filetabs">Edit</li><li class="filetabs">Settings</li>
</ul>
</div>
And here is the CSS:
#container {
min-width: 960px;
max-width: 1034px;
min-height: 500px;
background: rgba(245,212,13,1);
}
/* START OF MAIN MENU */
#main_bar ul {
width: 60%;
position: relative;
left: 3.2%;
border: 1px solid black;
background: rgba(153, 244,200,0.3);
}
.maintabs {
display: inline-block;
width: 25%;
line-height: 3.5em;
list-style-type: none;
}
.maintabs a {
display: block;
text-decoration: none;
color: rgb(165,165,165);
color: rgba(165,165,165,1);
text-align: center;
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}
.s_leftright {
list-style-type: none;
}
.maintabs ul {
display: none;
}
.maintabs:hover > ul {
display: inline-block;
position: absolute;
}
*/ END OF MAIN MENU */
/* START OF FILE MENU */
#filem_right {
display: inline-block;
position: relative;
width: 30%;
left: 69%;
top: 14%;
right: 3.2%;
}
.filetabs {
display: inline-block;
width: 33.3%;
overflow: hidden;
list-style-type: none;
line-height: 3.5em;
}
I had a look at Firebug and it appears that none of my code for 'filem_right' is rendered by the browser (FF 3.6).
Thank you,
Your comment here is incorrect,
*/ END OF MAIN MENU */
Should be /* at the start. This could be a reason the filem_right CSS isn't being picked up by the browser.
Saw this www.workatplay.com/ website, and got fascinated on how simple and nice stuff can look. I wish to make exactly like the header above.
With the header I am reffering to this:
http://img227.imageshack.us/img227/619/header1o.png
And how the links + the "[workatplay.com]" logo is set up at the right.
I tried looking at the source & css/source for learning, but It doesnt seem to be there. The part where the nav-sub(the pink bar) gets colordefined(css) and splitted.
Is the whole header a background itself? Why cant i find it in the css or anywhere else to know how they have done.
How can i make a header like this?
Here you go.. http://jeaffreygilbert.com/workatplayheader.html
Preview:
CSS:
/* Resetter */
ol, ul, li, a {
background: transparent;
border: 0px;
font-size: 100%;
margin: 0px;
outline: 0px;
padding: 0px;
vertical-align: baseline;
}
ul, li {
list-style-type: none;
}
/* Body */
body {
background-image: url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/bg-home.png);
}
/* Header */
.header {
margin: 0px auto;
position: relative;
width: 1000px;
}
.header ul li {
float: left;
}
.header ul li a {
background-position: 0% 0%;
background-repeat: no-repeat;
cursor: pointer;
display: block;
height: 80px;
text-indent: -9999px;
}
.header ul li a, ul#nav-sub {
background: transparent url(http://www.workatplay.com/sites/all/themes/play/css/schemes/pink/sprite-nav.png) no-repeat scroll 0px -160px;
}
/* Nav */
ul#nav {
height: 80px;
margin-top: 80px;
-webkit-padding-start: 40px;
display: block;
}
ul#nav li.services a {
background-position: 0px 0px;
width:115px;
}
ul#nav li.toolbox a {
background-position: -115px 0px;
width:115px;
}
ul#nav li.work a {
background-position: -224px 0px;
width: 86px;
}
ul#nav li.about a {
background-position: -310px 0px;
width: 93px;
}
ul#nav li.insights a {
background-position: -403px 0px;
width: 113px;
}
ul#nav li.home {
float: right;
}
ul#nav li.home a {
background-position: -533px 0px;
width: 200px;
}
/* Sub Nav */
ul#nav-sub {
background-position: 0px -160px;
background-repeat: no-repeat;
height: 40px;
overflow: hidden;
}
ul#nav-sub li.contact {
float: right;
}
ul#nav-sub li.contact a {
background-position: 0px -200px;
width: 200px;
}
HTML:
<div class="header">
<ul id="nav">
<li class="home">work [at] play vancouver</li>
<li class="services">services</li>
<li class="toolbox">toolbox</li>
<li class="work">work</li>
<li class="about">about</li>
<li class="insights">insights</li>
</ul>
<ul id="nav-sub">
<li class="contact">contact work [at] play</li>
</ul>
</div>
Using Google Chrome, right click and select "Inspect Element". There is a task pane called "computed css" that will tell you exactly what the browser is displaying no matter how the css got there (default, inline, external). I use that to debug css I'm developing all the time. Other browsers may have similar features.
As to how to replicate it? The css would be rather simple. Two floated divs for each row. Inside each div would be two additional divs, one floated left and one floated right. Play with the margins until you get the spacing you like.
width: 100%;
background-color: {color you want};
margin-left: ____;
margin-right: ____;
etc
As for the logo, research css's vertical-align attribute. This, couple with font-size should give you the effect you want.
Well at workplay.com there is css file http://workplay.com/files/css/css_09edd7837a8690967d3b6d7e136222f6.css which you can locate by viewing source.
if you are using firefox then download and install Firebug Plug-in. similarly if you are using IE there is similar plug-in available from Microsoft "IE Developer Toolbar". or chrome or safari comes with Web Page Inspector tool . all are simple to use
just point with pointer from this plug-in and click on one the element for which you want to know css or HTML or JavaScript details.
here you can experiment with this by changing and see result instantly.
copy and paste the following code in your editor, the color and fonts are not the same but it look nearly likes your header
<html>
<head>
<style>
body {
font : 20px Arial;
margin: 0px;
}
div#header {
background : black;
color: white;
padding-top : 25px;
}
/*The title*/
div#header h1 {
float: right;
margin-right: 100px;
border; 1px white;
font : 20px Arial;
}
div#header ul {
list-style: none;
height: 50px;
}
div#header li {
float: left;
width: 100px;
}
div#pink_area{
background: pink;
margin-top; 0px;
}
div#pink_area ul {
list-style: none;
height: 50px;
}
div#pink_area li {
float: left;
width: 45%;
line-heigth: 20px;
text-align : center;
padding : 10px
}
</style>
</head>
<div id="header">
<h1>Work <small>[at]</small> play <small><sup>TM</sup></small></h1>
<ul id="menu">
<li>services</li>
<li>toolbox</li>
<li>work</li>
<li>about</li>
<li>insigths</li>
</ul>
<div id="pink_area">
<ul>
<li>Engaging digital experiences</li>
<li>contact us</li>
</ul>
</div>
</div>
</html>
I am doing an horizontal dropdown menu. It looks like this :
[menu1][menu2][menu3][menu4]
But when I resize (less wide) my browser, the menu appears like :
[menu1][menu2]
[menu3][menu4]
I want it to remain in line all the time!
EDIT: my CSS file
/* General */
#cssdropdown, #cssdropdown ul {
list-style: none;
position: relative;
visibility: visible;
z-index: 1;
overflow: hidden;
}
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; }
/* Head links */
#cssdropdown li.headlink {
width: 11.911em;
float: left;
margin-left: -1px;
border: 1px black solid;
background-color: #e9e9e9;
text-align: center;
}
#cssdropdown li.headlink a { display: block; padding: 10px; }
/* Child lists and links */
#cssdropdown li.headlink ul { display: none; border-top: 1px black solid; text-align: center; }
#cssdropdown li.headlink:hover ul { display: block; }
#cssdropdown li.headlink ul li a { padding: 5px; height: 17px;}
#cssdropdown li.headlink ul li a:hover { background-color: #FF9; }
/* Pretty styling */
body {
font-family: verdana, arial, sans-serif;
font-size: 0.7em;
position: static;
}
#cssdropdown a { color: black; font-weight: bold; font-size:10px } #cssdropdown ul li a:hover { text-decoration: none; }
#cssdropdown li.headlink { background-color: #FFF50A; }
#cssdropdown li.headlink ul { background-position: bottom; padding-bottom: 10px; }
/*headermenu*/
#headerMenu {
position: relative;
float: left;
color: #DDD;
z-index: 1;
height: 34px;
right: 10px;
width: auto;
}
<div align="left" class="thrColElsHdr" id="headerMenu">
<ul id="cssdropdown" name="cssdropdown">
<li class="headlink"> Ecole
<ul>
<li>Histoire</li>
<li>Philosophie</li>
<li>Méthode</li>
<li>Equipe</li>
<li>Qualité</li>
<li>Services</li>
<li>Emplois</li>
</ul>
</li>
<li class="headlink"> Cours
<ul>
<li>Individuel</li>
<li>Semi-privé</li>
<li>Mini-groupe</li>
<li>Intensif</li>
<li>Entreprises</li>
<li>A distance</li>
<li>Par téléphone</li>
<li>Coaching</li>
<li>Soutien scolaire</li>
<li>Diplômes officiels</li>
</ul>
</li>
<li class="headlink"> Inscription
<ul>
<li>Auto-évaluation</li>
<li>Conditions</li>
<li>Tarifs</li>
<li>Formulaires</li>
</ul>
</li>
<li class="headlink"> Contact
<ul>
<li>Ecole</li>
<li>Lien externe</li>
</ul>
</li>
</ul>
</div><br/>
You should set min-width on the element containing the menu.
you want to use the css
white-space:nowrap;
this should be applied to the parent of your menus
if you provide some of the actual html, I can be more specific
for example
<div class='menuContainer'>
<span>menu1</span>
<span>menu2</span>
<span>menu3</span>
<span>menu4</span>
</div>
and css like
.menuContainer {
white-space:nowrap;
}
see http://www.w3schools.com/css/pr_text_white-space.asp
Edit in response to op question modifications
I assume #cssdropdown is the id your container around all the menus. please let me know the html for this if it's not correct.
Anyways, in this case, you should add to your css
#cssdropdown {
white-space:nowrap;
}
One other note, I see the width of your mens is set to 11.911em. When I see that I can only assume that you set it to be exactly the right width for whatever font you have. keep in mind your users may have slightly different fonts and suddenly your pixel perfect sizing is meaningless. design with a little more flexibility in mind.
Sounds like your width property isn't being set in either the HTML or the CSS.
Can you provide some sample code?