I want to output this HTML menu in WordPress. I am confused how to give classes to ul and the first a tag under ul. Thanks.
<div class="side-menu">
<ul>
<li class="dropdown">
Holi Tourism <span class="fa fa-plus"></span>
<ul class="dropdown-menu menu-more">
<li>Mount Kailash Yatra</li>
<li>Char Dham Yatra</li>
<li>Muktinath Yatra</li>
<li>Lumbini Yatra</li>
</ul>
</li>
<li class="dropdown">
Destination <span class="fa fa-plus"></span>
<ul class="dropdown-menu menu-more">
<li>Nepal</li>
<li>Thailand</li>
<li>Singapore</li>
<li>Europe</li>
<li>America</li>
<li>India</li>
</ul>
</li>
<li class="clearfix">Visa Assistance<em class="fa fa-plus"></em></li>
</ul>
Steps:
1. Create a menu from admin of your wordpress and
then, call it in your header.php file in the theme like,
<?php wp_nav_menu( array('menu' => 'Left Navigation Menu', 'menu_class' => 'nav navbar-nav')); ?>
"Left Navigation Menu" is the name of your menu.
Related
<ul class="categories-menu">
<li class="cat-item">
A
<ul class="children">
<li class="cat-item">
<i class="fas fa-plus open"><-- This elment should expand children on click -->
A-CHILD
</li>
</ul>
</li>
</ul>
<ul class="categories-menu">
<li class="cat-item">
A
<ul class="children">
<li class="cat-item">
<i class="fas fa-plus open"> <-- This elment should expand children on click -->
A-CHILD
</li>
</ul>
</li>
</ul>
I try to add class open to submenu, when I click in specific .
Now all items with class submenu will open when I click on .
I want to open just closest submenu.
(function($){
$('.open').click(function(){
($(this).next().find('.children').length)
$('.children').addClass('opened');
});
})(jQuery);
EDIT:
var elems = document.getElementsByClassName("open");
Array.from(elems).forEach(v => v.addEventListener('click', function() {
this.parentElement.getElementsByClassName('children')[0].toggleClass('opened');
}));
How to add slideDown/slideUp.
I have console error: slideDown is undefined when I try add it.
How to prevent Yii2 from compiling commented code.
I am new to yii2 and I need to comment some code for later use. Of course the commented code is not working (And that is why it is commented for now) but yii2 prompts errors from amongst them.
<ul class="nav nav-tabs">
<li class="active">
آمار
</li>
<li>
مشخصات
</li>
<!--
<li>
سفارش ها: <?=$model['dataProviderCourierOrders_totalConut']?>
</li>
-->
<li class="disabled">
پیام ها
</li>
</ul>
I get:
Undefined Index: dataProviderCourierOrders_totalConut
Is there a way to stop the commeted code from getting processed in yii2?
You should use the proper comment for php too eg:
<ul class="nav nav-tabs">
<li class="active">
آمار
</li>
<li>
مشخصات
</li>
<!--
<li>
<a href="javascript:void();" id="link_customer_orders">سفارش ها:
<?php // echo $model['dataProviderCourierOrders_totalConut'] ?> </a>
</li>
-->
<li class="disabled">
پیام ها
</li>
</ul>
First solution to comment html with php code show below example
use <?php /* Comment Html or PHP Code Here */ ?> show below
<ul class="nav nav-tabs">
<li class="active">
آمار
</li>
<li>
مشخصات
</li>
<?php /*
<li>
سفارش ها: <?=$model['dataProviderCourierOrders_totalConut']?>
</li>
*/ ?>
<li class="disabled">
پیام ها
</li>
Second solution to comment only php code show below example
use <?= PHP Code ?> to <?php // PHP Code ?> show below
<ul class="nav nav-tabs">
<li class="active">
آمار
</li>
<li>
مشخصات
</li>
<!--
<li>
سفارش ها: <?php // $model['dataProviderCourierOrders_totalConut'] ?>
</li>
-->
<li class="disabled">
پیام ها
</li>
Refer Yii 2 Core Framework Code Style maybe help full to you
How can i switch tabs with the links?
This is my current state
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs">
<li class="active">
Home
</li>
<li class="">
Sources
</li>
<li>
Contact Us
</li>
</ul>
</div>
</div>
I can switch between tabs just fine but when i try to make it so that the href lead to another link, it doesn't work. when i change
Home
to
Home
it doesn't work. but then i tried removing the data-toggle and it opens the link but it doesn't show that the tab is active.
Remove the data-toggle and replace it with class="active"
<div class="tabbable-panel">
<div class="tabbable-line">
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Sources</li>
<li>Contact Us</li>
</ul>
</div>
</div>
There could be two issues
1. bootstrap.min.js file is not added to the page
2.Specify the data-toggle="tab" on each tab, as well as create a .tab-pane with unique ID for every tab and wrap them in .tab-content.
Codepen- http://codepen.io/nagasai/pen/JKEYod
I figured it out with using some php. here's my code
<div class="tabbable-panel">
<div class="tabbable-line">
<?php
$hom = #_URL.'/home.php';
$sorc = #_URL.'/sources.php';
$cont = #_URL.'/contact.php';
$link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]"
?>
<ul class="nav nav-tabs">
<li class="<?php if($link==$hom){echo "active";}else{echo "";} ?>">
Home
</li>
<li class="<?php if($link==$sorc){echo "active";}else{echo "";} ?>">
Sources
</li>
<li class="<?php if($link==$cont){echo "active";}else{echo "";} ?>">
Contact Us
</li>
</ul>
</div>
</div>
and now it works perfectly
I have this in my HTML , I am using bootstrap 3 classes to make a drop down with in another drop down.
<div class="subnav">
<ul class="nav-pills">
<li class="dropdown" style="float: right;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" >
<span id="spnUsrName">Welcome, {{usrName}}</span>
</a>
<ul class="dropdown-menu pull-right">
<li class="disabled" >Disabled link 1</li>
<li class="disabled" >Disabled link 2</li>
<li class="divider"></li>
<li class="dropdown-submenu">Settings
<ul class="dropdown-menu">
<li>Change Password</li></ul>
</li>
<li>Logout</li>
</ul>
</li>
</ul>
</div>
However, the 'ul' inside the first dropdown-meu is not showing up. The "Settings" option is displayed, but change password option is not displayed. Where have I gone wrong.
I am trying to build my first website using the bootstrap template and I cannot get the dropdown button in the nav bar to show anything or open. It will display everything the way I want it, but the "open" function of it isn't working properly for some reason.
Here is what I have in the HTML part:
<li div class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" data-
toggle="dropdown">General Education <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Composition</li>
<li>American Institutions</li>
<li>Humanities</li>
<li>Physical Sciences</li>
<li>Quantitative Literacy</li>
<li>Fine Arts</li>
<li>Interdisciplinary</li>
<li>Social Sciences</li>
<li>Fine Arts</li>
</ul>
</li>
(I haven't updated all of the target links yet, for now most of them just show as a #)
and for the CSS I have:
.dropdown-toggle:active,
.open .dropdown-toggle {
outline: 0;
}
Please help!
Error in your code <li class="dropdown"> try this code
Your page does not include necessary js files so insert tis line in section
Script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
HTML
<li class="dropdown">
<a data-toggle="dropdown" href="#" class="dropdown-toggle" data-
toggle="dropdown">General Education <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Composition</li>
<li>American Institutions</li>
<li>Humanities</li>
<li>Physical Sciences</li>
<li>Quantitative Literacy</li>
<li>Fine Arts</li>
<li>Interdisciplinary</li>
<li>Social Sciences</li>
<li>Fine Arts</li>
</ul>
</li>
Example Markup
<!-- start: User Dropdown -->
<li class="dropdown">
<a id= "uname" style="color:#fff;text-shadow:none" class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-user"></i>
Admin
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li></i> Change Password</li>
<li><i class="icon-off"></i> Logout</li>
</ul>
</li>
<!-- end: User Dropdown -->