I have the following CSS that forms a directory tree. I want to be able to dynamically append <li> tags with N number of children <ul> tags to the existing dirTree. No matter what I try, I just end up appending raw text or the styles aren't being applied correctly.
I'm not a CSS guy, but I was inspecting in dev tools and see :before and :after, but not quite sure how to attach this using jquery.
The below code should be able to run in a static file without issues.
Thanks.
$("#dirTree").append("<li>Parent Directory</li><ul>child1</ul><ul>child2</ul>");
ul {
margin: 0px 0px 0px 20px;
list-style: none;
line-height: 2em;
font-family: monospace;
}
ul li {
font-size: 13px;
position: relative;
}
ul li:before {
position: absolute;
left: -15px;
top: 0px;
content: '';
display: block;
border-left: 1px solid #ddd;
height: 1em;
border-bottom: 1px solid #ddd;
width: 10px;
}
ul li:after {
position: absolute;
left: -15px;
bottom: -7px;
content: '';
display: block;
border-left: 1px solid #ddd;
height: 100%;
}
ul li.root {
margin: 0px 0px 0px -20px;
}
ul li.root:before {
display: none;
}
ul li.root:after {
display: none;
}
ul li:last-child:after {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="directoryPanel">
<div class="dir">
<ul id="dirTree">
<li class="root">
File Explorer
</li>
<li>
Want to create a new directory? Click here
<ul>
<li>Click here to upload a file</li>
</ul>
</li>
</ul>
</div>
</div>
«...seems like the branching style got removed...»
You are missing the <li> in your markup. The "branching style" is tied to it.
Moreover, some text within a <ul> but without <li> is invalid markup.
$("#dirTree").append("<li>Parent Directory</li><ul><li>child1</li></ul><ul><li>child2</li></ul>");
ul {
margin: 0px 0px 0px 20px;
list-style: none;
line-height: 2em;
font-family: monospace;
}
ul li {
font-size: 13px;
position: relative;
}
ul li:before {
position: absolute;
left: -15px;
top: 0px;
content: '';
display: block;
border-left: 1px solid #ddd;
height: 1em;
border-bottom: 1px solid #ddd;
width: 10px;
}
ul li:after {
position: absolute;
left: -15px;
bottom: -7px;
content: '';
display: block;
border-left: 1px solid #ddd;
height: 100%;
}
ul li.root {
margin: 0px 0px 0px -20px;
}
ul li.root:before {
display: none;
}
ul li.root:after {
display: none;
}
ul li:last-child:after {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="directoryPanel">
<div class="dir">
<ul id="dirTree">
<li class="root">
File Explorer
</li>
<li>
Want to create a new directory? Click here
<ul>
<li>Click here to upload a file</li>
</ul>
</li>
</ul>
</div>
</div>
Your ul>li structure seems entirely wrong in your jQuery. You have written css for li tags and appending ul tags as childs. That's where it caused the problem. In my answer I added a ul and inside the ul I have multiple li as your dynamic children.
For a clear definition I broke your jQuery into multiple lines which will be easier to read and understand
$("#dirTree").append("<li>Parent Directory</li>");
$("#dirTree").append("<ul id='parent'></ul>");
$("#parent").append("<li>child1</li>");
$("#parent").append("<li>child2</li>");
$("#parent").append("<li>child3</li>");
$("#parent").append("<li>child4</li>");
ul {
margin: 0px 0px 0px 20px;
list-style: none;
line-height: 2em;
font-family: monospace;
}
ul li {
font-size: 13px;
position: relative;
}
ul li:before {
position: absolute;
left: -15px;
top: 0px;
content: '';
display: block;
border-left: 1px solid #ddd;
height: 1em;
border-bottom: 1px solid #ddd;
width: 10px;
}
ul li:after {
position: absolute;
left: -15px;
bottom: -7px;
content: '';
display: block;
border-left: 1px solid #ddd;
height: 100%;
}
ul li.root {
margin: 0px 0px 0px -20px;
}
ul li.root:before {
display: none;
}
ul li.root:after {
display: none;
}
ul li:last-child:after {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="directoryPanel">
<div class="dir">
<ul id="dirTree">
<li class="root">
File Explorer
</li>
<li>
Want to create a new directory? Click here
<ul>
<li>Click here to upload a file</li>
</ul>
</li>
</ul>
</div>
</div>
Related
This question already has answers here:
How do I select every other div class element using just CSS (no js)
(4 answers)
Closed 1 year ago.
I'm trying to build a progressbar by using a li element.
<div class="stepprogresscontainer" id="stepprogressbar">
<div class="frontdiv" style="display: block; z-index: 5; position: relative;">
<ul class="stepprogressbar">
<li id="li-s-1" class="activeli">Schaden angelegt</li>
<li id="li-s-2" onclick="activeli2()">xxxx1</li>
<li id="li-s-3" onclick="activeli3()">xxxx1</li>
<li id="li-s-4" onclick="activeli4()">xxxx1</li>
<li id="li-s-5" onclick="activeli5()">xxxx1</li>
<li id="li-s-6" onclick="activeli6()">xxxx1</li>
<li id="li-s-7" onclick="activeli7()">xxxx1</li>
</ul>
</div>
<div style="position:relative; top: 20px;" class="behinddiv">
<div style="background-color: rgb(36, 36, 36); height: 3px; display: block; margin-left: 8%; margin-right: 8%;"></div>
<div id="coverline" style="transition: width 1s ease; background-color: #2ac570; height: 3px; display: block; margin-left: 8%; margin-right: 8%; margin-top:-3px; width: 0%;"></div>
<div id="progressline" style="background-color: #2ac570; height: 3px; display: block; margin-left: 8%; margin-right: 8%; margin-top:-3px; width: 0%;"></div>
</div>
CSS:
.stepprogresscontainer {
width: 100%;
}
.stepprogressbar li {
list-style-type: none;
float: left;
width: 14%;
position: relative;
text-align: center;
color: rgb(187, 68, 68);
font-family: witneyfont;
font-weight: bold;
font-size: 12px;
}
.stepprogressbar li:before {
content: '';
width: 25px;
height: 25px;
line-height: 25px;
border: 1.5px solid rgb(187, 68, 68);
display: block;
text-align: center;
margin: 0 auto 10px auto;
border-radius: 50%;
background-color: rgb(36, 36, 36);
cursor: pointer;
}
I am trying to achieve now that every other li element text is on top of the :before pseudo element. Right now everything is below the before element. I need to alter between so the text doesnt overlap on window resize.
currentlty it looks like that:
i need something like that:
Is there any easy way I didn't consider yet?
Thanks!
Put title on each elements :before and :after with content: attr(attribute-name). Then on even elements hide :after, on odd elements hide :before
ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
}
ul li {
border: 1px solid red;
border-radius: 50%;
width: 20px;
height: 20px;
float: left;
position: relative;
margin: 10px 15px;
background-color: white;
z-index: 6;
}
ul li:before,
ul li:after {
content: attr(data-text);
display: inline;
font-size: 12px;
position: absolute;
left: 0;
}
ul li:before {
top: -15px;
}
ul li:after {
bottom: -15px;
}
ul li:nth-child(odd):before {
display: none;
}
ul li:nth-child(even):after {
display: none;
}
ul:before {
content: '';
display: block;
width: 100%;
height: 2px;
background-color: blue;
position: absolute;
top: 20px;
z-index: 3;
}
<ul>
<li data-text="xxx1"></li>
<li data-text="xxx2"></li>
<li data-text="xxx3"></li>
<li data-text="xxx4"></li>
<li data-text="xxx5"></li>
</ul>
I made a sub nav bar, and it disappears when I hover over it, I tried changing somethings but it still will disappear when I hover over the submenu itself. if anyone knows what I could do that would be really helpful.
code:
<header>
<div class="containers">
<nav>
<ul>
<li>home</li>
<li>movies
<ul class="sub-menu">
<li>Recommended</li>
<li>best rated movies</li>
<li>Genre
<ul class="dsub-menu">
<li>Action</li>
<li>adventure</li>
<li>Comedy</li>
<li>Sci-Fi</li>
<li>Romance</li>
<li>Animation</li>
<li>Horror</li>
<li>Fantasy</li>
<li>Crime</li>
<li>Drama</li>
<li>Mystery</li>
</ul>
</li>
</ul>
</li>
<li>TV shows</li>
<li>watch list</li>
<li>Oscar</li>
<li><small>Sign In</small></li>
</ul>
</nav>
</div>
</header>
CSS:
containers{
width: 80%;
margin: 0 auto;
}
header{
background-color: firebrick;
height: 70px;
}
header::after{
content: '';
display: table;
clear: both;
}
img{
float: left;
padding: 10px 80px;
height: 50px;
width: 150px;
}
nav{
float: right;
padding: 10px 55px;
}
nav ul{
margin: 0;
padding: 0;
list-style: none;
}
nav ul li{
display: inline-block;
margin-left: 70px;
padding-top: 23px;
position: relative;
}
nav ul li a{
color: black;
text-decoration: none;
text-transform: uppercase;
}
nav a:hover{
color: #191919;
}
nav a::before{
content: '';
display: block;
height: 5px;
width: 100px;
background-color: black;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before{
width: 100%;
}
.sub-menu{
position: absolute;
background-color: indianred;
width: 200%;
height: 200px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
display: block;
top: 60px;
right: 0;
left: -30px;
overflow: hidden;
display: none;
}
.sub-menu li {
color: #eee;
font-size: 12px;
width: 100%;
left: -65px;
padding: 15px 0;
}
nav ul li:hover ul.sub-menu{
display: block;
}
note: the CSS code that I applied here doesn't contain the other submenu.
thank you for the help
You'll need to make the sub-menu appear on link hover like this
nav li:hover .sub-menu {
display: block;
background: #fff;
}
Codepen demo
I am tired to create drop down menu in my existing main menu of website. I have tried many times but no result sometimes I get menu inline sometimes everything disturbed.
HTML code :
<ul class="mainmenu">
<li>Best Forex Broker</li>
<li>Top Rated Brokers</li>
<li>
Forex Bonus
<ul>
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
</ul>
</li>
<li>Articles & Tutorials</li>
<li>Affiliate Programs</li>
<li>
<img src="<?=$site_folder?>/images/rss.png" alt="RSS" />
</li>
<li> </li>
</ul>
and CSS code:
div.mainmenu { background: url('images/body-bg.gif') 0px -50px repeat-x; }
div.mainmenu div.center { background: url('images/body-bg.gif') 0px -50px repeat-x; border-bottom-color: #007399; border-left: none; border-right: none; }
ul.mainmenu { height: 28px; padding: 4px 0px 5px 0px; background: url('images/body-bg.gif') 0px -50px repeat-x; }
ul.mainmenu li { float: left; padding: 5px 10px 5px 12px; margin: 0px; background: url('images/mainmenu-sep2.gif') left repeat-y; font-size: 15px; }
ul.mainmenu li a { color: #fff; }
ul.mainmenu li a:hover { color: #e0f0ff; }
ul.mainmenu img { width: 20px; height: 20px; vertical-align: middle; margin: 0px 0px -2px 0px; }
I am waiting for anybody to help me . Thanks
So, you may do something like below. Add a class .dropdown to the 2dn level menu and hide it to begin with. Then, on li:hover display it. You need to apply positions to your main menu and dropdown menu as I did in the CSS. Feel free to style your dropdown the way you like. Take a look.
ul.mainmenu { position: relative; height: 28px; padding: 4px 0px 5px 0px; }
ul.mainmenu li { list-style-type: none; float: left; padding: 5px 10px 5px 12px; margin: 0px; font-size: 15px; }
ul.mainmenu li a { color: #000; }
ul.mainmenu li a:hover { color: #e0f0ff; }
ul.dropdown { position: absolute; overflow: hidden; top: 24px; margin: 0; display: none; background: #ccc; padding: 0; max-width: 100px; }
ul.mainmenu li:hover .dropdown, .dropdown:hover { display: block; }
<ul class="mainmenu">
<li>Best Forex Broker</li>
<li>Top Rated Brokers</li>
<li>
Forex Bonus
<ul class="dropdown">
<li>drop1</li>
<li>drop2</li>
<li>drop3</li>
</ul>
</li>
<li>Articles & Tutorials</li>
</ul>
I am following up on this question and answer:
Sub-menu expanding parent div instead of displaying on top
If there is a div below the menu in the example above, how do you keep 1) that div contents from moving around, and 2) the size of the div from moving around, yet keep it responsive?
For example I forked the js fiddle from the link above and created the div id="mytest". I'd like the menu and the "mytest" div to be completely independent when you hover over the "About Me" link. Here is my fork: http://jsfiddle.net/nXqn8/
Here is the code:
<div id="menu">
<ul>
<li><a id="" class="" href="">Home</a></li>
<li><a id="" class="" href="">About Me</a>
<ul class="sub-menu">
<li>Biography</li>
<li>Photo Galery</li>
<li>Foot Print</li>
</ul>
</li>
<li><a id="" class="" href="">Expertise</a></li>
<li><a id="" class="" href="">Projects</a>
<ul class="sub-menu">
<li>Geo 228 Portal</li>
<li>NEP Application</li>
<li>Geo Address Book</li>
<li>Assets Management</li>
</ul>
</li>
<li><a id="" class="" href="">Contact</a></li>
</ul>
</div>
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: visible;
z-index: 2;
height: 35px;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}
#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}
#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: relative;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
#mytest {
background-color: red;
}
Ultimately, I have after something like the main menus you see at the top of accenture dot com.
Thanks!
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
#mytest {
float:left;
background-color: red;
width:100%;
text-align: center;
}
DEMO
Define your #menu li position: relative and define your sub menu #menu ul.sub-menu position: absolute; left: 0; top: 100%;
as this css
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
Demo
I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed :
This is what I achieved but is not working on IE9 :|
http://fiddle.jshell.net/Hz2JH/
<ul id="main">
<li class="username" tabindex="1" >
<a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">Log Off</li>
</ul>
</li>
</ul>
ul#main {
color: 232323;
width: 120px;
border:2px solid #ccc;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:#f1f1f1;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
So how can I build a custom select like the one used on twitter?
This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.
#addMenu, #addMenu ul {
list-style: none;
}
#addMenu {
float: left;
}
#addMenu > li {
float: left;
}
#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}
#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}
#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000;
}
#addMenu ul li:hover a {
background: #ddd;
}
HTML
<ul id='addMenu'>
<li>
<a href='#'>MENU</a>
<ul class='noJS'>
<li><a href='URL'>Option1</a></li>
<li><a href='URL'>Option2</a></li>
<li><a href='URL'>Option3</a></li>
<li><a href='URL'>Option4</a></li>
</ul>
</li>
</ul>