Develop Reference

drop down according menu

I am trying to make drop down according menu for wordpress. but getting trouble for wordpress render code and js. may be i can fix something on my js or can do something on my wordpress function it will work. the working and raw html version is here if you click on projects then menu is open.
but wordpress menu render little bit different way, render version html is here
see the difference raw html is like before
<li><div class="link">Projects<i class="icon-down"></i></div>
and render wordpress version is <li>Projects so main difference is div and link class.
have any idea how can make it work ?

Try providing id of the <ul>that holds the lists in href.
<li>Projects
or
try using data-target
<li><a data-target="Id of the ul">Projects</a>

How to disable mdl tabs

I am using Material Design Lite on a project and I have some mdl-tab tabs in my settings page. However, some of the settings are only useful if certain conditions are met. I would like to have a tab which is disabled unless the conditions are met.
This is what I'm doing now, which doesn't work:
<div class="mdl-tabs__tab-bar">
Display
Device
Measurement
</div>
Is there any way to do this? If so, how?
The project is in Cordova. So HTML, CSS, Javascript and JQuery answers are all welcome.

I just solved similar problem in my project. I know i am a bit late but I hope that this will maybe help someone in the future.
Render your page without classes or text.
<div class="mdl-tabs__tab-bar">
Display
<a id=deviceTab href="#deviceSettings"></a>
<a id=measurementTab href="#measSettings"></a>
</div>
You should add listener on input(needed for your conditions) and when the conditions are met just add class (mdl-tabs__tab) and text (Device, Measurement).
You can do that with jQuery
$("#deviceTab").addClass("mdl-tabs__tab").text("Device");
$("#measTab").addClass("mdl-tabs__tab").text("Measurement");
If user deletes information needed you can just remove text and class again and he wont be able to click on tab.
<div class="mdl-tabs__tab-bar">
Display
<a id="deviceTab" href="#deviceSettings" class="mdl-tabs__tab">Device</a>
<a id="measTab" href="#measSettings"class="mdl-tabs__tab">Measurement</a>
</div>

You can achieve this by removing the href attribute from the tag while still leaving the classes and link text. This will keep the tab looking like a tab and when you want to enable it just add the href with the id of the tab panel you want to activate.

Using two data-toggle for same element in bootstrap

I was messing around with Bootstrap and created a page which has a simple navigation menu. I wanted to add modal for one of the links, which already has a tooltip.
And I did add the modal to li like this,
data-toggle="modal" data-target="#SettingsModal" data-toggle="tooltip"
Surprisingly, its working. It doesn't make much sense. Because at least one data-toggle has to be neglected.
I know that it is better to wrap it inside an element which has tooltip. My question is, how is this working?

It's working because the Bootstrap data attributes use separate jQuery selectors to "activate" the various components.
Since
$('[data-toggle="modal"]') and $('[data-toggle="tooltip"]') are both referenced in the Bootstrap JS code, both modal and tooltip components are working.

Expand/collapse mobile navbar without JavaScript

On mobile devices, Bootstrap 3 by default reduces the navigation bar (navbar) to a hamburger icon. When clicking the hamburger, a JavaScript toggles the display of the navigation menu items - either expanding or collapsing the navbar. But
how to toggle the bootstrap mobile navbar collapse/expand without requiring JavaScript?
If this were possible, it would have nice performance advantages: users can already navigate before JavaScript is executed (a good plus on flaky mobile connections), and smaller projects may be able to drop the dependency on jQuery + bootstrap javascript entirely, saving around 45k on first page load. Plus, the site becomes more robust in case of JS errors - at least the page navigation stays usable.
Alternatively, one could re-implement the bootstrap JS without jQuery dependency - done here for the navbar.
For reference, this is what the static navbar top example looks like in mobile mode:

Yes, it's possible!
Getting the BS3 mobile navbar to toggle without JavaScript
creating a hidden checkbox that contains the navbar state (expand if checked)
changing the navbar button to a label for this invisible checkbox
use the CSS General Sibling Selector to toggle display of the navbar.
How to change CSS attributes without JavaScript was discussed before on SO, and the principle shown there 1. Applying this bootstrap is straightforward.
Try the Live demo thanks to rawgit or see it in production on flexponsive
A full demo is available on Github project bs3-navbar-collapse-without-javascript.
Browser Support
the CSS general sibling selector is widely supported
successfully tested in mobile: Android 5 and iOS 8
also works on desktop: Chrome 43 and Firefox 38
Limitations
dropdowns still require JS, if you decide to use them
Steps in detail
First, custom CSS you need to add:
/* show the collapse when navbar toggle is checked */
#navbar-toggle-cbox:checked ~ .collapse {
display: block;
}
/* the checkbox used only internally; don't display it */
#navbar-toggle-cbox {
display:none
}
Then change the navbar HTML as follows:
<!-- insert checkbox -->
<input type="checkbox" id="navbar-toggle-cbox">
<!-- change the "hamburger" icon from being a button to a label for checkbox -->
<div class="navbar-header">
<label for="navbar-toggle-cbox" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</label>
<!-- end label not button -->

Bootstrap tab is working but the tab content is not showing

I am working on admin dashboard with html, css and javascripts. This is my first time working on it. I used bootstrap for the responsive layout and some bootstrap js (tabs, collaps). I also use chartjs for pie chart and line chart and sidr responsive menu. But the problem is with bootstrap tab and collaps function. They didn't work properly.When i click on the tab menu tabs are working but don't showing chart content in it. I spent lot of time to fix this. But i can't. I need your help.
Here is the link for the admin dashboard: http://demo.devkinz.com/admindashboard/

You are including the JavaScript, but aren't targeting the tab elements with it. From the docs, you also need to add in a bit of JavaScript to specifically target those tabs.
Alternatively, you should be able to add data-toggle="tab" to each of your dashboard_menu li elements.

In your code you have:
<ul class="list-inline pull-right" role="tablist">
<li class="active">Usage</li>
<li>Monthly</li>
</ul>
But you have no .tab-pane's with the id's: id="ussgemonth" & id="coletsmonth"
Not only do you have 2 missing .tab-pane with these ids -- since these are nested you have to follow the same structure as the parent.