First of all, sorry for my english, it is not perfect. I have a tree ordered in ul lists, something like this (it is dinamic):
<ul>
<li>
Level 1
<ul>
<li>Item level 2</li>
</ul>
</li>
</ul>
<ul>
<li>
Level 1
<ul>
<li>
Item level 2
<ul>
<li>Item level 3</li>
<li>Item level 3</li>
</ul>
</li>
<li>
Item level 2
</li>
<li>
Item level 2
</li>
</ul>
</li>
</ul>
This is the result I would like:
http://oi48.tinypic.com/dpgt4p.jpg
I would like to join each father with its son with lines. I know how to display each div correctly with display:table, display:cell, etc... But I have no idea about how to draw those lines with css for joining the divs.
Has anybody any idea or suggestion please? I would like to combine HTML + CSS or any solution with Javascript.
Have you ever seen before something like this?
This is a CSS only approach. It's a not a fully working example but maybe it helps you to get into the right direction.
I used this background image to connect the items: This must be improved, as it doesn't work solely when there are multiple child elements on a sibling.
CSS
ul {
position: relative;
width: 100px;
left: 115px;
}
ul > li {
position: relative;
}
ul > li > ul {
margin-top: -18px;
}
ul > li > ul > li:before {
content: '';
position: absolute;
top: 5px;
left: -31px;
width: 30px;
height: 5px;
background: transparent url(http://i.stack.imgur.com/l2mLf.png) no-repeat 0 -10px;
}
ul > li > ul > li:first-child:before {
top: 10px;
left: -21px;
width: 20px;
height: 1px;
background: transparent url(http://i.stack.imgur.com/l2mLf.png) no-repeat 0 0;
}
Demo
Try it
You can use jsPlumb as an add on to jQuery. It will allow you to plumb the elements together, or for a slightly more simple solution take a look at raphaels example.
Related
I was wondering how to remove the vertical space between a unordered list and div. I know it's possible with using - margins, but I have a feeling that isn't really a clean method.
This is my code:
.menu {
list-style-type: none;
background-color: #660066;
}
.menu li {
display: inline;
padding-left: 40px;
padding-right: 40px;
}
.div {
width: 100%;
height: 500px;
background-color: #660066;
}
<nav>
<ul class="menu">
<li>Check 1</li>
<li>Check 2</li>
<li>Check 3</li>
<li>Check 4</li>
</ul>
</nav>
<article class="div">
In this case your ul simply has standard margin on top and bottom. margin: 0; solves this.
jsfiddle
ul{
margin: 0;
}
Always do a reset like shown below for both UL and LI. That way spaces will only be present when you apply them by yourself.
ol, ul {
margin: 0;
padding: 0;
}
Click here to see why it is important to set a reset.
You have to set up your position since you are going to move in close proximity to the original location your position will be relative from there you move can move it up or down , it should look like this
.div
position:relative;
bottom:30px;
I have a fiddle here http://jsfiddle.net/13v2fcjf/
It has a basic html document with lists and sublists
<ul>
<li>Item 1
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
</ul>
And I'm using the following css -
li:hover {
background: #f7f7f7;
}
When I hover on an li item with a subitem(s), all the subitems also get highlighted. This is not desirable. I want only the list item on which the user's hovering to be highlighted. How can I achieve this ?
Also, I tried using the :not selector but it doesn't work.
I think you just need to set the background on the nested <ul> tag. Something like this:
li:hover > ul {
background: #fff;
}
Edit: this is assuming you only want the parent <li> highlighted, which as #j08691 points out in the comments, might not be entirely what you're after. If you want each <li> to be highlighted, you might have to modify your HTML slightly to make this easier:
<ul>
<li><a>Item 1</a>
<ul>
<li><a>Sub Item 1</a></li>
<li><a>Sub Item 2</a></li>
<li><a>Sub Item 3</a></li>
</ul>
</li>
<li><a>Item 2</a></li>
<li><a>Item 3</a></li>
<li><a>Item 4</a>
<ul>
<li><a>Child 1</a></li>
<li><a>Child 2</a></li>
<li><a>Child 3</a></li>
</ul>
</li>
</ul>
By wrapping the items and sub-items in another tag - here I've just used an <a> tag for the sake of argument - you can target that tag to be highlighted on :hover without the nested tags being affected in the same way as in your original code:
a {
display: inline-block;
padding: 4px;
}
a:hover {
background: #f7f7f7;
cursor: pointer;
}
See http://jsfiddle.net/13v2fcjf/3/
If Ian's option doesn't work for you, a second opotion is to wrap the <li> contents in a span and apply the hover to that, like this example fiddle:
HTML:
<ul>
<li><span>Item 1</span>
<ul>
<li><span>Sub Item 1</span></li>
<li><span>Sub Item 2</span></li>
<li><span>Sub Item 3</span></li>
</ul>
</li>
....
CSS
li span:hover {
background: #f7f7f7;
cursor: pointer;
}
HTH,
-Ted
This effect is just natural because the sub items are inside of the main items.
There are two options that come to my mind:
1.) Resetting the background color of the sub lists with
li:hover > ul {
background-color: white;
}
2.) Using the li items as a container:
<li><span class="highlighted">Item</span></li>
.highlighted:hover {
background-color: red;
}
This was a challenge, but the following CSS works with your existing markup. It highlights only a hovered li, without highlighting its parent.
The main trick is to have the CSS create new content when hovering over a nested li. You can do this using the :before pseudo element:
li li:hover:before {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
z-index: -1;
background: white;
}
(If you're targeting CSS3 browsers only, you can use ::before instead of :before.)
This causes a nested li to cover up its parent li. The negative z-index prevents the background from covering up any text.
Parent li's need relative positioning with a z-index, and nested li's need static positioning for this to work:
li {
position: relative;
z-index: 0;
}
li li {
position: static;
}
The other trick has been mentioned in other posts:
li:hover ul {
background: white;
}
Full CSS:
li {
line-height: 1.65em;
cursor: pointer;
}
li {
position: relative;
z-index: 0;
}
li li {
position: static;
}
li:hover {
background: #def;
}
li:hover ul {
background: white;
}
li li:hover:before {
content: '';
position: absolute;
top: 0; bottom: 0; right: 0; left: 0;
z-index: -1;
background: white;
}
Working fiddle
I created a navigation bar at for my website using an in-line list and then it has been styled. Each <li> is exactly the same but I want the last one to have a different size as i wish to change the width and padding of it.
I have no idea how I am able to do this, I've tried multiple ways but experienced lots of problems along the way. I tried adding styling in the <li> tag on the HTML page, but it changed absolutely nothing, I then tried using the last-child selector which worked to an extent. It allowed me to change the padding of it but not width. But it didn't just change it for the last one but also the first one.
CSS:
.dropdown{
position: relative;
margin: 0 auto;
float: right;
top: 20px;
font-size: 13px;
}
.dropdown li {
float: left;
width: 155px;
background-color:#373737;
position: relative;
border-bottom:1px solid #575757;
border-top:1px solid #797979;
}
.dropdown li a {
display: block;
padding: 10px 8px;
color: #fff;
position: relative;
z-index: 2000;
text-align:center;
}
.dropdown li a:hover,
.dropdown li a.hover{
background: #CF5C3F;
position: relative;
}
.dropdown :last-child li a{
padding: 0px;
width: 40px;
}
HTML
<ul class="dropdown">
<li><a id="page1" href="index.html">Home</a></li>
<li>Internet Architecture
<ul class="sub_menu">
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Four</li>
</ul>
</li>
<li>Internet Security
<ul class="sub_menu">
<li>Laws</li>
<li>Security Risks</li>
</ul>
<li>Internet Security
<ul class="sub_menu">
<li>Laws</li>
<li>Security Risks</li>
</ul>
</li>
<li>Item One
<ul class="sub_menu">
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ul>
</li>
<li><img src="images/contact_white.png" width="30px" height="auto"></li>
</ul>
Does anyone have any idea on how to fix this?
I want the last one to have a different size as i wish to change the width and padding of it.
So if you meant last child of level 1 than use
ul.dropdown > li:last-child {
/* Target */
}
And if you meant each last child of li on 2nd level ul, than use
ul.dropdown > li > ul > li:last-child {
/* Target */
}
Demo
Demo (Just more elements, nothing fancy)
I may be missing something here, but if I understand your question right it's as simple as giving the <li> you want to be the odd one out an id, and then using css to change li#myId..
I have a menu with sub menus. I used nested uls to achive this. Now I'm facing this situation: I want all the items and subitems to be displayed horizontally at their respective level. The problem is that when an parent list has a children list, it's width grows so the next item at the same level goes far to the right.
To have things more clear here's a fiddle of what I'm taking about: http://jsfiddle.net/matias/n8gFT/
As you can see I would like to have the items B and C placed where the green dashed spaces are.
Is it possible to do this?
I would like to keep using nested uls and display: inline-block for itemes instead of float: left
SAMPLE HTML:
<ul>
<li>ITEM A
<ul>
<li>sub item A1</li>
<li>sub item A2</li>
</ul>
</li>
<li>ITEM B</li>
<li>ITEM C</li>
</ul>
SAMPLE CSS:
ul{border: 1px solid red; padding: 10px;}
li{display: inline-block; border: 1px solid blue; margin: 5px; padding: 10px; vertical-align: top;}
span{border: 1px dashed lime; margin: 0 10px; padding: 5px;}
EDIT 1: I forgot to tell you this: A, B and C have children. If I click on B, it's children are shown and A's and C's are hidden...and so on....
We will start off with a little CSS
#menu > li.sub ul {
list-style: none;
position: absolute;
top: -1000em;
left: 0px;
}
#menu li.sub ul li a {
display: inline;
}
#menu > li.sub:hover ul {
top: 3em;
}
#menu{
text-align:left;
}
li{
display:inline-block;
}
Finish with some HTML
<ul id="menu" >
<li class="sub">
ITEM A
<ul>
<li>sub A1</li>
<li>sub A2</li>
</ul>
</li>
<li class="sub">
ITEM B
<ul>
<li>sub B1</li>
<li>sub B2</li>
</ul>
</li>
<li class="sub">
ITEM C
<ul>
<li>sub C1</li>
<li>sub C2</li>
</ul>
</li>
</ul>
and a JSFIDDLE http://jsfiddle.net/ShADm/28/
You could style the lists that are being pushed over of margin-left: -20px; here is a working fiddle
http://jsfiddle.net/n8gFT/1/
Of course the amount it is pushed over can be edited by changing the margin-left
I achieved what I was looking for using display: table-cell to the li's and reducing ul's width.
See demo
Add a class to the sub lists and style them like this:
.sub { position: absolute; margin-left: -27px; }
I have a nested list for a navigation
<ul>
<li>item 1</li>
<li>item 2
<ul>
<li>item 2.1</li>
<li>item 2.2</li>
<li>item 2.3</li>
</ul>
<li>item 3</li>
</ul>
Now i want to display the top level (item1, 2 & 3) at the top right of the page in a horizontal line. The submenu should be displayed as a list on the left side of the page.
I can not change the HTML aparently.
So how do i get the sublevel out of there?
Using position:absolute it will use the upper level for orientation wich will change depending on the width of the main level.
I need it to use the mother div for orientation so i can place it on the right side of the page.
Is this even possible?
Any ideas anyone?
Are you looking for this?
SEE DEMO
CSS:
ul { float: right; }
ul li { float: left; padding: 0 20px; }
ul li ul { position: absolute; left: 0px; top: 0px; display:none; }
ul li ul li { float: none; }
ul li:hover ul { display: block; }