I need to have a hierarchical, collapsible list that has 3 columns. I have the first two parts working, but I can't seem to get the CSS quite right for the third. The picture shows the current code:
(The slightly duplicated text to the left of col3 is a visual error with the fiddle.)
The goal is to have a three col pseudo-table within a collapsible list such that col1 has the standard list indenting, and col2 is centered for all levels and col3 is at the right for all levels. It should look like this:
I tried to accomplish this by having them both float right and then adding a margin/padding to either col2 or col3 so as to move col2 towards the middle where I want it to be. However, somehow col2 ends up on the outside of col3. Seems impossible to me, but with CSS no bug is impossible.
I have tried various other combinations of margins and paddings and float: lefts without luck.
Here's an almost working fiddle.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<body>
<div id="listContainer">
<div class="listControl">
<a id="expandList"><button>Expand All</button></a>
<a id="collapseList"><button>Collapse All</button></a>
</div>
<ul id="expList">
<li>
<div class="col1">Non-parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
<li>
<div class="col1">Grandparent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
<li>
<div class="col1">Parent</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
<ul>
<li>
<div class="col1">Child</div>
<div class="col2">Col2</div>
<div class="col3">Col3</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
CSS:
/********************/
/* EXPANDABLE LIST */
/********************/
#listContainer {
margin-top: 15px;
}
#expList ul,
#expList li {
list-style: none;
margin: 0;
padding: 0;
cursor: pointer;
}
#expList p {
margin: 0;
display: block;
}
#expList p:hover {
background-color: #121212;
}
#expList li {
line-height: 140%;
text-indent: 0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}
/*This works in Firefox following W3C standards, but not in other browsers!*/
/*https://drafts.csswg.org/css-lists/#marker-content*/
/* Collapsed state for list element */
#expList .collapsed {
/* list-style-type: "+";*/
list-style: none;
/*padding: 0px;*/
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
/*list-style-type: "-";*/
list-style: none;
/*padding: 0px;*/
}
/*code that works for non-Firefox*/
#expList .collapsed:before {
content: "+";
width: 1em !important;
margin-left: -1.2em;
display: inline-block;
}
#expList .expanded:before {
content: "-";
width: 1em !important;
margin-left: -1.2em;
display: inline-block;
}
#expList {
clear: both;
}
.col1 {
display: inline;
/*padding-right: 100px;*/
}
.col2 {
display: inline;
float: right;
}
.col3 {
display: inline;
float: right;
}
JS:
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible */
/**************************************************************/
function prepareList() {
$('#expList').find('li:has(ul)')
.click(function(event) {
if (this == event.target) {
$(this).toggleClass('expanded');
$(this).children('ul').toggle('medium');
}
return false;
})
.addClass('collapsed')
.children('ul').hide();
//Hack to add links inside the cv
$('#expList a').unbind('click').click(function() {
window.location($(this).attr('href'));
return false;
});
//Create the button funtionality
$('#expandList')
.unbind('click')
.click(function() {
$('.collapsed').addClass('expanded');
$('.collapsed').children('ul').show('medium');
})
$('#collapseList')
.unbind('click')
.click(function() {
$('.collapsed').removeClass('expanded');
$('.collapsed').children('ul').hide('medium');
})
};
/**************************************************************/
/* Functions to execute on loading the document */
/**************************************************************/
$(document).ready(function() {
prepareList()
});
The solution to this was to realize that float: right apparently also makes the blocks align right, so that they appear in reverse order. With this in mind, one can just switch the order of the blocks to get the normal order back.
E.g.:
<div class="col1">Non-parent</div>
<div class="col4">Col4</div>
<div class="col3">Col3</div>
<div class="col2">Col2</div>
Working fiddle.
Related
I have created a page with different background colors. What I'm trying to achieve is to change color fixed nav links on different sections. Like I've given custom class of light and dark respectively to the sections. And want to change color of nav links as the sections scrolls.
I'm a newbie to js and jquery, please let me know how can i achive this, I'm getting ideas to how to do, but i'm not able to execute it (or write it in a proper way)
This is what I have yet
<div class="nav">
<ul>
<li>Home</li>
<li>About</li>
<li>FAQ</li>
<li>Contact Us</li>
</ul>
</div>
<div class="one m-light"></div>
<div class="two m-dark"></div>
<div class="three m-light"></div>
<div class="four m-dark"></div>
<style>
.nav{
position:fixed;
}
.nav li {
display: inline-block;
list-style: none;
height: 60px; /* should be the same as line-height */
line-height: 60px;
padding: 0 40px;
}
.nav-link {
color: #000;
text-decoration: none;
mix-blend-mode:difference !important;
}
.one, .two, .three, .four{
height:100vh;
width:100%;
}
.one{
background:#f1f1f1;
}
.two{
background:#050505;
}
.three{
background:#f4f4f4;
}
.four{
background:#030303;
}
</style>
<script>
$(document).ready(function(){
var scroll_pos = 0;
var darkSection = $('.m-dark')
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(darkSection > scroll_pos) {
$('.nav-link').css('color', '#000');
} else {
$('.nav-link').css('color', '#fff');
}
});
});
</script>
how to prevent opening link if parent li hasClass: has-menu ? it must work for all nested level
in example below only Sub Sub cat 1/1 and Sub cat 1/2 should open link but if i make it work then collapse with + and - is broken , how to combinate both collapse and link opening only if li dont have class: has-menu
$('li').click(function(e){
if ($(this).hasClass('has-menu')) {
e.preventDefault();
e.stopPropagation();
$(this).children("div").children("ul").toggleClass("menu-close");
$(this).toggleClass("menu-open");
}
})
ul{
padding: 0px;
list-style: none;
}
ul li{
padding: 5px 0;
}
ul li a{
width: 100%;
display: inline-block;
}
.menu-close{
display: none;
/*background-color:red;*/
}
/* Main menu */
.menu-main{
width: 250px;
}
.menu-main li{
position: relative;
}
.has-menu:before{
content: '+';
position: absolute;
right: 0;
}
.has-menu.menu-open:before{
content: '-' !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu-main">
<li class="has-menu">
Test 1
<div class="menu-wrapper">
<ul class="menu-child menu-close">
<li class="has-menu">
Sub cat 1/1
<div class="menu-wrapper">
<ul class="menu-subchild menu-close">
<li>
Sub Sub cat 1/1
</li>
</ul>
</div>
</li>
</ul>
<ul class="menu-child menu-close">
<li>
Sub cat 1/2
</li>
</ul>
</div>
</li>
</ul>
.has-menu>a{
pointer-events: none;
}
Try this.
just disable pointer-events on anchor tags that have parent with class .has-menu
My jsFiddle is here : https://jsfiddle.net/r1s6651y/1/
I am not able to get Navigation with Numerals to be aligned horizontally.
I have applied display : inline-block for upper ul but still the next menu item begins on the second line.
Any clues ?
It should be stacked as :
1111111 22222222
AAAAAAAAAAAAA
BBBBBBBBBBBBB
You can't have li with width: 100%; and then expect them to align next to eachother. Ofcourse they naturally fall to 2 lines instead of 1, they're inline elements after all (Think of it like this: the <p> tag is also "inline" bu default. When the text in a <p> is too long, the text "breaks" to a new line. As will your li when it is set to be inline). You also want the li to next to eachother, not the ul which is what contains the li. So apply the display: inline-block; to the (correct) li elements
ul#myRow li {
width: auto; //could also be set to 50% if it's just 2 li elements
display: inline-block;
}
Two things. As already noted, you want the li items to be display:inline. You also need to remove the width:100% from the lis of #myRow. Then it will collapse and display inline as long as the container is wide enough for them (otherwise it will wrap).
li {
background: #00945f;
border-bottom: 1px solid #016e39;
clear: both;
float: none;
height: 62px;
margin: 0;
padding: 0 30px 30px;
width: 100%;
}
ul {
list-style-type: none;
}
ul#myRow li {
display:inline-block;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<ul id="myRow" class="row">
<li>
11111111
</li>
<li>
2222222
</li>
</ul>
<ul class="row">
<li>
AAAAAAAAAAAAAAa
</li>
<li>
BBBBBBBBBBBBBBB
</li>
</ul>
</section>
Man, you do some mistakes.
I fixed it at: https://jsfiddle.net/r1s6651y/4/
li {
display: inline-block;
background: #00945f;
border-bottom: 1px solid #016e39;
margin: 0;
padding: 10px 20px;
}
put a class on the li you want horizontal, then add css display: inline
.horiz {
display: inline;
}
<section>
<ul id="myRow" class="row">
<li class="horiz">
11111111
</li>
<li class="horiz">
2222222
</li>
</ul>
<ul class="row">
<li>
AAAAAAAAAAAAAAa
</li>
<li>
BBBBBBBBBBBBBBB
</li>
</ul>
</section>
I am trying to create a mobile navigation (toggle type) on a breaking point 768px.
My mark up is:
<div class="tm_menu_mobile">
<div class="menu_icon">
<div class="three_line"></div>
<div class="three_line"></div>
<div class="three_line"></div>
</div>
<div style="clear:both;"></div>
<div id="nav">
<div class="navigasi_menu">
<div class="navigasi_list">
<div class="nav-menu">
<ul>
<li class="page_item page-item-7">Home</li>
<li class="page_item page-item-2">Sample Page</li>
<li class="page_item page-item-9">test page 1</li>
</ul>
</div>
</div>
</div>
</div>
</div>
this mobile navigation should be hidden screens wide above 768px. So I put following java script code in to the header:
/* Mobile navigation*/
jQuery(document).ready(function() {
$('#nav').hide();
$('.menu_icon').click(function() {
$('#nav').slideToggle('fast');
return false;
});
});
and I put following CSS code into my style sheet:
/* Primary mobile menu */
.tm_menu_mobile {
display: block;
margin: 15px auto !important;
width: 98.5% !important;
background:#0071B7;
padding:6px;
height:auto;
overflow:hidden;
}
/* avoiding horizontal scroll bar across the site */
.navigasi_menu {
width: 100%
}
.navigasi_menu li {
float: none;
text-align: center;
border-bottom: 1px solid #fff;
}
/* Making navigation li one below another */
.navigasi_menu li:hover {
width: 100%
}
.tm_menu_mobile .menu_icon {
width:50px;
height:50px;
border-radius: 10px;
border:2px solid #000;
float:right;
margin-right:10px;
}
.menu_icon .three_line {
float:none;
width:36px;
height:5px;
background:#fff;
margin:9px auto;
}
.tm_menu_mobile #nav {
display: inline-block;
}
but toggle not working.
Also when I hovering the navigation in 768px screen it's not stable... it's 3rd li comes above the 1st..
but the same js fiddle work here the sample js toggle I tested
and the site I am trying is bit different. SITE
How can I get it work?
the issue is related to wordpress??
Try this :
<script type="text/javascript">
/* Mobile navigation toggle*/
jQuery(document).ready(function() {
jQuery('.tm_menu_mobile #nav').hide();
jQuery('.menu_icon').click(function() {
jQuery('.tm_menu_mobile #nav').slideToggle('fast');
return false;
});
});
</script>
i want to Design Menu bar as shown below, i have created whole list in ul but how to set different height ,width for center .Please help i tried code below but middle part is not increasing,
<nav id="Edit_panel">
<ul>
<li class="menubar" title="redo">
<div id="link">redo</div>
</li>
<li class="menubar" title="undo">
<div id="link">undo</div>
</li>
<li class="menubar" title="cut">
<div id="link">Cut</div>
</li>
<li class="menubar" title="copy">
<div id="link">Copy</div>
</li>
<li class="menubar" title="paste">
<div id="link">paste</div>
</li>
<li class="menubar" title="select">
<div id="link">select</div>
</li>
<li class="menubar" title="hand">
<div id="link">hand</div>
</li>
<li class="menubar" title="zoomin">
<div id="link">zoomin</div>
</li>
<li class="menubar" title="zoomout">
<div id="link">zoomout</div>
</li>
<li class="menubar" title="addimage">
<div id="link">Add img</div>
</li>
</ul>
</nav>
css:
#Edit_panel {
background-color: gray;
height:25px;
display: inline;
}
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Just add another class to elements You want to increase and set diferent height.
And remove duplicated ids.
First of all, you cannot have multiple elements with the same id, so you should change all
id = "link"
to
class = "link"
or delete those id's
Another mistake is putting height to the ul in css. The 30px height of ul means, that you want the whole list to be 30px high. You want to define the height for li elements, not the whole ul.
Instead of:
ul
{
background-color: #D8D8D8;
height:30px;
}
li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
Should be:
ul
{
background-color: #D8D8D8;
}
li {
height:30px;
display: inline-block;
margin-right: 10px;
margin-left: 10px;
text-align: center
}
If you want some elements to have different height or width, you can add some class to them, and define height for the class, for example:
<li class="menubar higher" title="paste">
<div id="link">paste</div>
</li>
And then in CSS you add:
.higher {
height: 50px;
}
Then your elements will be 30px high, and elements witch also have "higher" class, will he higher than others;]
you can give different heights to your elements by jquery. Use this demo for it.
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<style>
.test
{
height:25px;
}
</style>
<script>
$(document).ready(function(e) {
$("li").eq(5).addClass("test"); // In 'eq' 5 is a index of li element and it starts from 0 to n-1
});
</script>