How can i design following kind of structure with HTML/CSS ?
Please provide Any reference sites links if you have
EDIT:
Sorry if you are not getting my question, its just that i don't know much about designing so
What i am trying to build is Tree structure but i don't know what HTML tags i should use and how will i draw these lines so just need your help for this. if you have any idea how accomplish this than please share.
Thank you.
https://github.com/wesnolte/jOrgChart
This is a beautiful jQuery plugin which does exactly what you want.
Code Sample:
Let's say that this is your unordered list.
<ul id="org">
<li>
Food
<ul>
<li id="beer">Beer</li>
<li>Vegetables
<ul>
<li>Pumpkin</li>
</ul>
</li>
<li>Bread</li>
<li class="collapsed">Chocolate
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
Add a dummy div like this
<div id="chart" class="orgChart"></div>
Now,you could simply use
jQuery(document).ready(function() {
$("#org").jOrgChart({
chartElement : '#chart',
dragAndDrop : true
});
});
To render your unordered list into a directory tree/organisational chart structure.
Related
I have this problem I can’t solve alone, and I need to ask for your help.
Basically I would like to have a two panels, the first one is like a main filter, while the other one is a some kind of modifier.
<section class="primary-panel">
<p>Primary panel</p>
<ul class="primary-panel-wrapper">
<li class="primary-panel-item" data-foo="A">foo A</li>
<li class="primary-panel-item" data-foo="B">foo B</li>
<li class="primary-panel-item" data-foo="C">foo C</li>
</ul>
</section>
<section class="secondary-panel">
<p>Secondary panel</p>
<ul class="secondary-panel-wrapper">
<li class="secondary-panel-item" data-bar="A">bar A</li>
<li class="secondary-panel-item" data-bar="B">bar B</li>
<li class="secondary-panel-item" data-bar="C">bar C</li>
</ul>
</section>
So when I choose “foo A/B or C” the script filter those items, and it’s quite ok.
But when I choose the “modifier” (bar A/B or C) I would like to merge those those attributes together and display modified version, so I could get something like this “foobar AA/AB/AC/BA/BB/BC/CA/CB/CC”.
So basically when I choose “foo A” and then “bar A/B/C” I would like to get “foobar AA/AB/AC”, same for “foo B” -> ”foobar BA/BB/BC” and “foo C” -> “foobar CA/CB/CC” and so on.
I kind of accomplished this, but I always get AA/AB/AC no matter what I chose earlier (foo A/B or C), and it’s killing me.
If you have any idea how it could be solved I would appreciate it if you help me with this.
Here you'll find full fiddle:
http://jsfiddle.net/c0drbs2u/33/
Thanks in advance.
Solution:
You had a very small mistake in your code :)
var foobar = $(".showcase-overview .item").attr('data-foo') + $e.attr('data-bar')
// Needed to be
const foobar = $(".primary-panel-item.active").attr('data-foo') + $e.attr('data-bar')
That's it!
Fiddle:
Here's the Fiddle with the fix: http://jsfiddle.net/c0drbs2u/47/
this is my site.
this is how I finally make it look like
I want to divide the the menu list items into two sub menu say menu left and right. And then wrap them in a div. This is make it easy for me to style them and this way they would stay responsive as well.
Now, I have been trying to achieve this by
jQuery( ".menu-item-580", ".menu-item-583",".menu-item-584",".menu-item-563").wrapAll("<div class='new' />").after(".menubar-brand");
I have trying this in browser console.
I also tried same above code by using appendTo() instead of after()
But, still no luck.
In your code you're basically doing this:
<ul>
<li>
<div class="new">
<li>
<li>
</div>
<li>
</ul>
which is not a valid markup.
The easiest way to goup <li>s would be to assign different additional css classes to different parts of the list:
<ul>
<li class="group1">
<li class="group1">
<li class="group2">
<li class="group2">
</ul>
Also, have a look at this: Is there a way to group `<li>` elements?
I have a tree structure in HTML like the below:
<ul id="org" style="display:none">
<li>
Food
<ul>
<li>Beer</li>
<li>Vegetables
<ul>
<li>Pumpkin</li>
<li>Aubergine</li>
</ul>
</li>
<li>Bread</li>
<li>Chocolate
<ul>
<li>Topdeck</li>
<li>Reese's Cups</li>
</ul>
</li>
</ul>
</li>
</ul>
I am using jOrgChart from GitHub and you may see a demo here.
I want to store this tree structure into my database and I have a table like below:
id | name | parent_id
However I just can't find a way to do that. Any one could help on that?
Thanks so much in advance.
Does anyone know how I could modify the following code to make a sliding multi-level menu and breadcrumbs in Angular, like this facebook help page?
My basic html code is like this:
<ul>
<li>
Electronics
<ul>
<li>back</li>
<li>Phones</li>
</ul>
</li>
<li>
Furniture
<ul>
<li>back</li>
<li>
Living Room
<ul>
<li>back</li>
<li>Bookshelves</li>
</ul>
</li>
<li>Patio</li>
</ul>
</li>
</ul>
In regards to the sliding menu, there are a ton of solutions out there. Here are some links:
http://www.sitepoint.com/pure-css-off-screen-navigation-menu/
http://blogs.sitepointstatic.com/examples/tech/css3-sliding-menu/index.html
To stay in the angular world you can switch out partials in different states or use something like ng-switch. There are really so many options it is difficult to give you a single answer.
In regards to the breadcrumbs, here are a few nice pre-built options:
jsc-breadcrumbs - a blog post with instructions
angular-breadcrumbs
For a sitemap page I have the ordered text and the associated 'level' of how far the page is in the tree.
Right now we have the most simplistic indented look using CSS margins and we want it to look more funky.
Here is the sample code and a link to a test page:
HTML:
<div class='sitemapItem'>
<a href="#">
<div class='sitemapLevelX'>FOO</div>
</a>
</div>
CSS:
.sitemapLevelX{
margin-left:Ypx;
}
Sample code can be found here:
http://jsfiddle.net/m77TR/1/
I include the following image to get an idea what I'm aiming for:
Is it possible to do relatively simply in CSS? Or do I need to sprinkle some javascript on top?
You could simply achieve this structure using a nested ul:
<ul>
<li>level 1</li>
<li>level 1</li>
<li>level 1 with sub
<ul>
<li>level 2</li>
<li>level 2</li>
</ul>
</li>
</ul>
This way you can easily define this kind of subtree structure in HTML. After this you can change the styling in CSS to fit your needs.
A demo for your desired layout can be seen here: http://jsfiddle.net/N4JH2/ and a tutorial on how to get this done here: http://www.csscody.com/css/css-sitemap-design-tutorial/594/
The closest css property I can think of is 'quotes', which allows you to define different symbols for different levels of quotes.