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
Related
I'm having some issues with keeping the accordion open whilst clicking links within that accordion dropdown. It's a careers page and when I open the individual jobs, I want users to be able to open the application in a new tab. Any ideas?
https://www.trinovainc.com/careers.html
<div class="accordion">
<div class="accordion-panel careers" data-id="panel-1">
<div class="accordion">
<h4><a class="accordion-title">Application Engineer - Mobile, AL<span class="ion-chevron-down"></span></a></h4>
</div>
<div class="accordion-panel-content panel-1">
<p>TriNova is looking for an energetic and personable candidate who is a self-motivated and well-organized professional to join our team as an Application Engineer.</p>
<h4>Summary</h4>
<ul>
<ul>
<li>Provides in-depth product and application knowledge for TriNova and customers; specifically providing inside sales support for account managers. Duties to include reviewing of specifications, verifying model codes, quoting, ordering, expediting and communicating with the customer and sales force.</li>
</ul>
</ul>
<h4>PRIME RESPONSIBILITIES</h4>
<ul>
<ul>
<ul>
<li>Review all types of applications that consist of but not limited to: sizing valves, choosing instruments, sizing gamma, sizing flowmeters and creating electrical & PID drawings for various types of field instrument panels.</li>
<li>Review specifications and provide model codes for products.</li>
<li>Perform CAD drawings of best practice installation and wiring</li>
<li>Communicate with the customer, outside salespeople, manufacturers and the Area Vice President.</li>
<li>Understand commercial issues and terms.</li>
<li>Field visits with account managers for relationship development, training and as required to optimize the order process and achieve customer satisfaction</li>
<li>Improve product and technical knowledge.</li>
<li>Troubleshooting of basic device issues.</li>
</ul>
</ul>
</ul>
<h4>MINIMUM EDUCATION</h4>
<ul>
<ul>
<ul>
<li>Bachelor’s Degree in Engineering.</li>
<li>Minor in Sales Engineering is a plus</li>
</ul>
</ul>
</ul>
<h4>TRAVEL</h4>
<ul>
<ul>
<ul>
<li>Occasional travel required.</li>
</ul>
</ul>
</ul>
<h4>PREVIOUS JOB EXPERIENCE</h4>
<h4>Desired:</h4>
<ul>
<ul>
<ul>
<li>Previous related experience of at least 2 years</li>
</ul>
</ul>
</ul>
<h4>Required:</h4>
<ul>
<ul>
<li>None</li>
<ul></ul>
</ul>
</ul>
<a class="button orange apply" href="https://www.trinovainc.com/job-application.html" target="_blank">Apply Now</a>
</div>
</div>
</div>
Use event.stopPropagation():
In Javascript you have event bubbling, which means that whenever an event is fired for an element. That event bubbles up to all the parent elements. This means if you have an onlick for the accordion to close it and you click a button (or anything else) inside of it, it will close. You can prevent this by using event.stopPropagation(). This will stop the event from propagating up the DOM structure.
Example:
function prop(e){
console.log(e.currentTarget);
}
function notProp(e){
console.log(e.currentTarget);
e.stopPropagation();
}
<div id="propagated" onclick="alert('Bubbled')"><button onclick="prop(event)">Click</button></div>
<div id="notpropagated" onclick="alert('OH NO')"><button onclick="notProp(event)">Click</button></div>
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 am using the isotope by metafizzy script, need to use it on projects page of my website, it's working fine but what i want to do is filtering by custom post categories (portfolio categories), here's the code on that project page:
<div id="aside">
<ul id="subMenu" class="accordionMenu" data-option-key="filter">
<li class="dcjq-parent-li">
<a href="#" class="dcjq-parent active">Tipologia<span class="dcjq-icon"></span>
</a>
<ul style="display: block;">
<li>todos</li>
<li>Residencial</li>
<li>Comercial</li>
<li>Cultural</li>
<li>Interiores</li>
</ul>
</li>
<li class="dcjq-parent-li">
Datas<span class="dcjq-icon"></span>
<ul style="display: none;">
<li>todos</li>
<li>1980 - 1984</li><li>1985 - 1989</li><li>1990 - 1994</li><li>1995 - 1999</li><li>2000 - 2004</li><li>2005 - 2009</li><li>2010 - 2014</li>
</ul>
</li>
</ul>
</div>
Here's the link to filters code, where i added the classes
http://goo.gl/y4cXLB
What i want to do is, to do a custom loop or php function so i can display the categories items as isotope filters. Alternatively i would like to use the tags to filter the posts with isotope, if that's an easy option.
I am not good in wordpress functions and php, i did the all integration by the tutorials on web and isotope, jquery is implemented in right way.
I need the help to filter the post categories, or some function, easy solution.
There is a isotope plugin for wordpress: http://mintthemes.com/isotope-for-wordpress/
If you want to integrate isotope (with category filtering) yourself these tutorials (part 1 and 2) walk you through the process.
Part 1: http://www.aliciaramirez.com/2014/03/integrating-isotope-with-wordpress/
Part 2: http://www.aliciaramirez.com/2014/07/integrate-isotope-with-wordpress-part-2-categories/
I am trying to create a multi level drodown menu with the following code:
<nav role="navigation" class="navigation">
<ul>
<li>Home
</li>
<li>About
<ul>
<li>Company
<ul>
<li>Brands</li>
<li>Stuff</li>
<li>More Stuff</li>
</ul>
</li>
<li>Team
</li>
<li>Goals
</li>
<li>Photos
</li>
</ul>
</li>
<li>Portfolio
<ul>
<li>Chairs
</li>
<li>Beds
</li>
<li>Fireplace
</li>
<li>Onother
</li>
</ul>
</li>
<li>Portfolio
</li>
</ul>
</nav>
With some jQuery I have hidden all the second/third level items and added a class that will show a "+" in the right side via CSS.
Demo: http://jsfiddle.net/ZJug9/1/
This works fine for most users, but when I try to use this with VoiceOver on Mac I just can't simply find a way to navigate. Maybe because I don't know all the things about VoiceOver or I am doing something wrong with HTML and JS
Is there something missing from my code that could improve accessibility for blind people using screen readers. What should I do more and why for this particular example.
Any up to date tools or documentation that will put me up to speed about accessibility. I think that the W3C accessibility website is too cluttered and confusing. I read some things about Aria too, but the documentation is really complicated and some people say that using proper markup is good enough.
Please try to answer for this example
UPDATE
I added visibility hidden to the hidden ul's as the screen reader does not speak invisible elements and I will still be able to use CSS3 for the height transition
Demo 2: http://jsfiddle.net/ZJug9/3/
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.