I've made an attempt here. However, it has two problems:
IE
Last element of a list being a sublist
Is there a better way of doing this?
You didn't really go into detail on what your criteria are, but from what you have said, I'd suggest taking a look at SlickMap CSS.
Update: Got it! I just remembered where I'd seen what you're looking for:
jsTree is a jQuery plugin which creates a tree widget with the kind of styling you want and uses <ul> internally to represent it.
Try the code below, it's pure CSS and no JS/jQuery (which IMO is way more compatible), works by manipulating borders and spacing.
Works on FF/Chrome & IE. Enjoy :-)
.parent a,
li {
font-size: 22px;
color: #000;
font-family: "Source Sans Pro", sans-serif;
}
.child a,
li {
font-size: 18px;
color: #000;
}
.subchild a,
li {
font-size: 18px;
color: #888888;
}
.s2child a,
li {
font-size: 16px;
color: #ccc;
}
.tree,
.tree ul {
list-style-type: none;
margin-left: 0 0 0 10px;
padding: 0;
position: relative;
overflow: hidden;
}
.tree li {
margin: 0 0 0 15px;
padding: 0 12px 0 20px;
position: relative;
}
.tree li::before,
.tree li::after {
content: '';
position: absolute;
left: 0;
}
/* horizontal line on inner list items */
.tree li::before {
border-top: 2px solid #000;
top: 14px;
width: 15px;
height: 0;
}
/* vertical line on list items */
.tree li:after {
border-left: 2px solid #000;
height: 100%;
width: 0px;
top: -5px;
}
/* lower line on list items from the first level because they don't have parents */
.tree > li::after {
top: 15px;
}
/* hide line from the last of the first level list items */
.tree > li:last-child::after {
display: none;
}
/* hide line from before the Home or starting page or first element */
.tree > li:first-child::before {
display: none;
}
.tree ul:last-child li:last-child:after {
height: 20px;
}
.tree a:hover {
color: red;
font-weight: 500;
text-shadow: 1px 2px 2px #F3F3F3;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pure CSS Tree</title>
<link href="tree.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul class="tree">
<li class="parent">Grand Parent
<ul>
<li class="child">Parent
</li>
<li class="child">Parent
<ul>
<li class="subchild">Child
<ul>
<li class="s2child">Grand Child
</li>
<li class="s2child">Grand Child
</li>
<li class="s2child">Grand Child
</li>
<li class="s2child">Grand Child
</li>
<li class="last s2child">Grand Child
</li>
</ul>
</li>
<li class="subchild">Child
<ul>
<li class="s2child">Grand Child
</li>
<li class="s2child">Grand Child
</li>
</ul>
</li>
</ul>
</li>
<li class="child">Parent
</li>
</ul>
</li>
</ul>
</body>
</html>
Related
I have a simple question. I'm trying to display the elements for "about" "general" and "social-buttons" classes within a nested unordered list. I want these to appear horizontal and inline with each other. I want them to be side by side basically, not vertical. If you can help me figure out which selector I need to add the 'display:inline' block, that would be much useful.
<div class="footer-container">
<div id="footer_menu">
<div id="footer-copy">
<li class="about-blurb">
<h3>Viral DNA</h3>
<ul>
<li>
<p>Virael Marketing is the leading digital marketing blog for the social web. We are a one-stop hub to help you learn from your viral marketing campaigns, offer tips & tricks, and build the best digital marketing teams.</p>
</li>
</ul>
<li class="General">
<h3>General</h3>
<ul>
<li><a class="button" href="#">Media</a></li>
<li><a class="button" href="#">Resources</a></li>
<li><a class="button" href="#">Blog</a></li>
<li><a class="button" href="#">Store</a></li>
<li><a class="button" href="#">Contact</a></li>
</ul>
<li class="social-icons">
<h3>Follow Virael</h3>
<ul>
<li>
<!--social media buttons go here-->
</li>
</ul>
</ul>
</div>
</div>
The CSS:
.footer-container {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial, sans-serif;
float: left;
text-align: left;
width: 828px;
text-transform: capitalize;
background-color: #4169E1;
color: #FFF;
position: relative;
bottom: 0;
left: 269px;
border-top: 10px solid #B0C4DE;
overflow: hidden;
z-index=-1000;
}
.footer-container h3 {
text-align:justify;
}
#footer_menu {
font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro,'MyriadPro', Arial, sans-serif;
list-style-type:none;
z-index=-1000;
}
#footer_menu ul {
margin: 0px 30px;
padding: 10px 30px;
list-style-type:none;
text-decoration:none;
display:inline;
z-index=-1000;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
z-index=-100;
display:block;
color: white;
clear:both;
}
#footer_menu .about-blurb ul li {
width: 200px;
height: auto;
text-align:justify;
}
Replace your css with mine. Live example here
#footer_menu ul {
/* margin: 0px 30px; */
padding: 10px 30px;
list-style-type: none;
text-decoration: none;
display: inline;
}
#footer_menu ul li {
margin: 0 0;
padding: 5px 0;
display: inline-block;
color: white;
clear: both;
}
Remove margins from the ul and add inline-block to li
When the menu "product" is clicked or mouse over, the another list of menus appear.. but the image block which is below the menu bar, moves away from the position. if i use css [ position:absolute;], then the image box remains static and the product's sub-menu overlaps the image block, which is what i wanted. but the image blocks width & height settings change drastically, thereby spoiling the alignment.
pls chk the codings in jsFiddle
.home_menu {
border: 1px solid black;
width: 98%;
height: 3.3%;
margin-right: auto;
margin-left: auto;
}
div#menuDemo {
clear: both;
//border:1px solid black;
height: 78%;
width: 100%;
position: relative;
left: 0;
top: 0;
background-color: #A55927;
/*Remove this next one in production - Used for demo purpose only*/
margin-bottom: 0.1%;
padding-top: 0.7%;
z-index: 4;
}
div#menuDemo ul {
list-style: none;
margin: 0;
padding: 0;
background-color: #A55927;
}
div#menuDemo > ul > li {
float: left;
text-align: center;
}
div#menuDemo ul li {
width: 25%;
//border: 5px solid purple;
}
div#menuDemo ul li a {
text-decoration: none;
font-weight: bolder;
text-align: center;
}
div#menuDemo > ul > li > ul {
display: none;
text-align: center;
}
div#menuDemo > ul > li:hover > ul {
display: block;
text-align: center;
}
.sub1 {
width: 100%;
//border:1px solid green;
}
.colouring {
color: black;
font-weight: bolder;
}
.colour {
//border:1px solid blue;
color: black;
text-align: center;
//width:100%;
}
.wrapper {
border: 5px solid pink;
width: 98.8%;
height: 82%;
margin-top: 1%;
z-index: 2;
}
.uniform_block {
border: 5px solid green;
width: 100%;
height: 40%;
cursor: pointer;
}
.uniform_block img {
width: 100%;
height: 100%;
}
<body>
<div class="home_menu">
<div id="menuDemo">
<ul>
<li id="homeMenu">About Us
</li>
<!-- <li >About Us</li> -->
<li>Products
<ul class="sub1">
<li> Uniforms
<ul>
<li>  
</li>
<li> Automobile Industry Uniforms
</li>
<li> Pharmaceutical Uniforms
</li>
<li> Food Industry Uniforms
</li>
<li> Government Sector Uniforms
</li>
<li> School/College Uniforms
</li>
<li>  
</li>
</ul>
</li>
<li>Shoes
<ul>
<li>  
</li>
<li> Industrial Shoes
</li>
<li> Safety & Security Shoes
</li>
<li> Executive Shoes
</li>
<li>  
</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us
</li>
</ul>
</div>
</div>
<div class="wrapper">
<div class="uniform_block">
<img src=" http://t0.gstatic.com/images?q=tbn:ANd9GcSH-kRi3rkVciPcH_c6dDJJI6C1ntzwcKl9MoVQIyuKk8F7unpf" />
</div>
<div class="home_footer">
<div class="footer_contents"></div>
</div>
</div>
</body>
kindly help. My requirement is, when i mouse over the "product menu", the drop down menu should be viewed above the image block which is below the menu bar.
Add position:absolute to the css of your ul menu (in your case, the sub1 class), and remove the width:100% so it can inherit the default width of its parent. Absolute positioning will prevent your browser from trying to put your ul element after the previous element on the page.
ul.sub1 {
position:absolute;
}
http://jsfiddle.net/C2YXp/2/
I've read through some similar threads on this site and found some helpful tips, but I'm still having difficulty getting columns to work correctly in my CSS drop down menu. The test site is here: http://iphonebuy-host1.gaiahost.net/index.html
In part I'm using ideas from method 4 in this article - http://alistapart.com/article/multicolumnlists - however this is for XHTML and I'm using HTML, maybe that's causing my issue?
The main thing is the list items in the second column don't stick to the bottom of the header. According to the referenced article, setting a negative margin on .reset is supposed to bring the entire second column up where I want it, but only the header (which has .reset applied to it) is moving up.
I should say that you probably have to view my menu in Firefox to see what I'm talking about - so far it's even more messed up in Safari and I haven't even tried IE or Chrome.
CSS
/** top navigation menu **/
.topnav {
list-style: none;
background-color: #FFF;
font: 1.313em arial, sans-serif;
color: #0071BC;
margin: -1.8em 0 1.2em 25em;
text-align: center;
}
.topnav li {
position: relative;
display: inline;
padding: 0 .5em 0 .5em;
border: none;
}
.topnav a {
display: inline-block;
}
/** for drop-down menu **/
.topnav li ol {
background: #fff;
list-style: none;
position: absolute;
width: 15.5em;
font: .8em arial, sans-serif;
padding: 0 1em .5em .5em;
margin-top: -.1em;
left: -9999px;
z-index: 200;
-webkit-border-radius: 0 0 .5em .5em;
-moz-border-radius: 0 0 .5em .5em;
border-radius: 0 0 .5em .5em;
-webkit-box-shadow: 0 3px 2px 1px #ccc;
-moz-box-shadow: 0 3px 2px 1px #ccc;
box-shadow: 0 3px 2px 1px #ccc;
}
.topnav li li h1 {
font: bold 1.2em arial, sans-serif;
white-space: nowrap;
margin: .5em 0 .5em 0;
}
.topnav li li h2 {
font: 1em arial, sans-serif;
white-space: nowrap;
}
.topnav li li a {
white-space: nowrap;
display: block;
}
.topnav li: hover ol {
left: 0;
margin-left: -.9em;
}
.topnav li: hover a {
color: #99CCCC;
}
.topnav li: hover ol a {
color: #0071BC;
}
.topnav li: hover ol a: hover {
color: #99CCCC;
}
.topnav li li.column1 {
margin-left: 0em;
width: 6.8em;
float: left;
line-height: 1.5em;
}
.topnav li li.column2 {
margin-left: 10em;
width: 4em;
float: left;
line-height: 1.5em;
}
.topnav li li.reset {
margin-top: -10.8em;
}
HTML
<div class="topnav">
<ol>
<li>Home</li>
<li>Get Quote
<ol>
<li class="column1"><h1>Select phone:</h1></li>
<li class="column1"><h2>CDMA</h2></li>
<li class="column1">3GS 8GB</li>
<li class="column1">3GS 16GB</li>
<li class="column1">4 8GB</li>
<li class="column1">4 16GB</li>
<li class="column1">4S 16GB</li>
<li class="column1">4S 32GB</li>
<li class="column2 reset"><h2>AT&T GSM</h2></li>
<li class="column2">3GS 8GB</li>
<li class="column2">3GS 16GB</li>
<li class="column2">4 8GB</li>
<li class="column2">4 16GB</li>
<li class="column2">4S 16GB</li>
<li class="column2">4S 32GB</li>
</ol>
</li>
<li>About</li>
</ol>
</div>
The code in the question floats the list items. The method 4 approach that it's based on doesn't. That one change prevents the approach from having the chance to work as intended.
In a case like this, it's best to either stay entirely consistent with the approach, or go in an completely different direction and do not imitate it at all. Getting caught in the middle -- inconsistently following the approach -- is likely to cause the most trouble.
Split the HTML into bite-sized chunks
You'll have a far easier time styling this if you change the HTML. Instead of putting everything into a single list and splitting the list up into 2 columns, try splitting the HTML into 2 separate lists.
It may require adding a few wrapper divs as well. Something like the following:
<div class="topnav">
<ul>
<li>Home</li>
<li>Get Quote
<div class="dropdown">
<h1>Select phone:</h1>
<div class="columns clearfix"> <!-- add a reliable clearfix -->
<div class="column1"> <!-- floated left -->
<h2>CDMA</h2>
<ul>
<li>3GS 8GB</li>
<li>3GS 16GB</li>
...
</ul>
</div>
<div class="column2"> <!-- floated left -->
<h2>AT&T GSM</h2>
<ul>
<li>3GS 8GB</li>
<li>3GS 16GB</li>
...
</ul>
</div>
</div>
</div>
</li>
<li>About</li>
</ul>
</div>
Splitting the related parts of the dropdown into separate HTML elements gives you more flexibility with styling it.
And semantically, HTML of this sort is much better, because the h1 and h2 tags aren't being treated as if they're the same type of content as the specific models of phone. That helps with SEO and accessibility.
Use The following CSS
.topnav {
list-style:none;
background-color:#FFF;
font:1.313em arial, sans-serif;
color:#0071BC;
margin:-1.8em 0 1.2em 25em;
text-align:center;
}
.topnav li {
position:relative;
display:inline;
padding:0 .5em 0 .5em;
border:none;
}
.topnav a {
display:inline-block;
}
.topnav li ol {
background:#fff;
list-style:none;
position:absolute;
width:15.5em;
font:.8em arial, sans-serif;
padding:0 1em .5em .5em;
margin-top:-.1em;
left:-9999px;
z-index:200;
-moz-border-radius:0 0 .5em .5em;
-webkit-border-radius:0 0 .5em .5em;
border-radius:0 0 .5em .5em;
-moz-box-shadow: 0 3px 2px 1px #ccc;
-webkit-box-shadow: 0 3px 2px 1px #ccc;
box-shadow: 0 3px 2px 1px #ccc;
}
.topnav li li {
}
.topnav li li h1 {
font:bold 1.2em arial, sans-serif;
white-space:nowrap;
margin:.5em 0 .5em 0;
}
.topnav li li h2 {
font:1em arial, sans-serif;
white-space:nowrap;
}
.topnav li li a {
white-space:nowrap;
display:block;
}
.topnav li:hover ol {
left:0;
}
.topnav li:hover a {
color:#99CCCC;
}
.topnav li:hover ol a {
color:#0071BC;
}
.topnav li:hover ol a:hover {
color:#99CCCC;
}
.topnav li li.column1 {
margin-left: 0em;
width:6.8em;
float:left;
line-height:1.5em;
}
.topnav li li.column2 {
/*margin-left:10em;*/
width:4em;
float:left;
line-height:1.5em;
}
.topnav li li.reset {
margin-top:-10.8em;
}
And The HTML
<div class="topnav">
<ol>
<li>Home</li>
<li>Get Quote
<ol>
<li class="column1"><h1>Select phone:</h1></li>
<div style="width:130px;height:auto;float:left">
<li class="column1"><h2>CDMA</h2></li>
<li class="column1">3GS 8GB</li>
<li class="column1">3GS 16GB</li>
<li class="column1">4 8GB</li>
<li class="column1">4 16GB</li>
<li class="column1">4S 16GB</li>
<li class="column1">4S 32GB</li>
</div>
<div style="width:130px;height:auto;float:left">
<li class="column2"><h2>AT&T GSM</h2></li>
<li class="column2">3GS 8GB</li>
<li class="column2">3GS 16GB</li>
<li class="column2">4 8GB</li>
<li class="column2">4 16GB</li>
<li class="column2">4S 16GB</li>
<li class="column2">4S 32GB</li>
</div>
</ol>
</li>
<li>About</li>
</ol>
</div>
What I did over here is, put column1 inside a division and column 2 on a different division. Hope this will solve your problem. Thank you.
I know this has been discussed here before - as I've read through a lot of questions about the same thing. And have tried the solutions, but I just can't seem to make this stupid nav right align (needing li blocks to align to the right). Can someone please point out my mistake - thank you.
http://jsfiddle.net/gstricklind/vP38J/4/
CSS
ul#menu-main-top {
float: right;
}
.nav-bar > li {
border: 1px solid #333;
display: block;
float: left;
line-height: 38px;
margin: 0;
padding: 0;
position: relative;
}
ul#menu-main-top li a {
color: #222222 !important;
}
.top-nav > li > a {
color: #E6E6E6 !important;
}
.nav-bar > li > a:first-child {
margin: 0 0 0 10px;
padding: 0 0 0 30px;
}
.nav-bar > li > a:first-child {
display: block;
font-size: 14px;
padding: 0 20px;
position: relative;
text-decoration: initial;
}
​HTML
<div class="eight columns">
<ul id="menu-main-top" class="top-nav nav-bar hide-for-small">
<li id="menu-item-58">
Home
</li>
<li id="menu-item-94">
Calendar
</li>
<li id="menu-item-59">
Meanings
</li>
<li id="menu-item-77">
About Us
</li>
<li id="menu-item-67">
Contact Us
</li>
<li id="menu-item-343" class="active">
My Account
</li>
<li class="logout">
Logout
</li>
</ul>
</div>
Is this what you were trying to do?
http://jsfiddle.net/vP38J/5/
Relevent changed code:
.nav-bar > li {
border:1px solid #333;
display:block;
float: right;
line-height:38px;
margin:0;
padding:0;
position:relative;
}
Also, if you are looking to have the order remain the same, just reverse the order of the list in HTML.
It would appear that I am suffering from a new bug in IE7, as I can't seem to find any reference to it anywhere else. It is best explained using screenshots, so here are a couple of links (and as a note, it's not a requirement for it to work in IE6, so I don't even want to know what it looks like under that!):
How it should be displayed (using Safari 4):
http://dl-client.getdropbox.com/u/45961/safari4.png
How IE7 is displaying it:
http://dl-client.getdropbox.com/u/45961/ie7.png
Here's the CSS for that menu chunk:
#mm #leftNav .navigation {
width: 100%;
margin-bottom: 0;
float: left;
}
#mm #leftNav li {
list-style: none;
display: inline;
margin: 0;
}
#mm #leftNav .navigation li ul {
display: none;
}
#mm #leftNav .navigation li a {
text-decoration: none;
color: #ffffff;
font-size: 11pt;
padding-left: 20px;
}
#mm #leftNav .navigation li {
cursor: pointer;
margin-right: 4px;
padding-left: 8px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 8px;
overflow: visible;
}
.menu_item {
background: #419185;
}
.menu_item:hover {
background: #48a093;
}
.currentcat {
background-color: #4aa8a6;
}
.currentcat:hover {
background: #4aa8a6;
}
And here is the HTML:
<div id="mm">
<div id="leftNav">
<ul class="navigation">
<li class="menu_item">
<a class="icon icon-base">Base</a>
</li>
<li class="menu_item">
<a class="icon icon-devices">Devices</a>
</li>
<li class="menu_item">
<a class="icon icon-management">Management</a>
</li>
<li class="menu_item">
<a class="icon icon-iptools">IP Tools</a>
</li>
<li class="menu_item">
<a class="icon icon-config">Configuration</a>
</li>
<li class="menu_item">
<a class="icon icon-admin">Administration</a>
</li>
</ul>
<div id="subnav"></div>
</div>
</div>
Any ideas?
top and bottom padding are not supported on inline elements (some browsers will render it, others won't)
Here's a good article on the problem:
http://www.maxdesign.com.au/presentation/inline/
If you really need correct padding, you should change the menu items to "display:block" and "float:left"
Hehe, activa beat me to it.
Indeed, move your margin/padding to the A element, kinda like so:
mm #leftNav .navigation li a {
text-decoration: none;
color: #ffffff;
font-size: 11pt;
display:block;
float:left;
background: #419185;
margin-right: 4px;
padding-left: 20px;
padding-right: 8px;
padding-top: 10px;
padding-bottom: 8px;
}
mm #leftNav .navigation li {
cursor: pointer;
}
.menu_item {
}