How can I completely change the layout of the submenu in WP?
Normally WP generates menu as UL > LI > UL > LI. but I need to change it to: UL > LI > DIV > ... > DIV > UL > ...
So there must be additional elements/wrappers to submenu. These wrappers also must contain custom CSS classes.
Is there a way to do this by some hooks or with some plugin?
The output should look like this
<ul>
<li>
<div class="sub">
<div class="wrapper">
<div class="section">
<div class="title"></div>
<ul>
<li></li>
...
<li></li>
</ul>
</div>
<div class="section">
<div class="title"></div>
<ul>
<li></li>
...
<li></li>
</ul>
</div>
...
</div>
</div>
</li>
<li>
<div class="sub">
<div class="wrapper">
<div class="section">
<div class="title"></div>
<ul>
<li></li>
...
<li></li>
</ul>
</div>
<div class="section">
<div class="title"></div>
<ul>
<li></li>
...
<li></li>
</ul>
</div>
...
</div>
</div>
</li>
...
</ul>
Thanks
Edit the template where your menu is displayed (probably header.php), and locate the wp_nav_menu function. Add or update the arguments items_wrap, before and after like this:
wp_nav_menu(array(
'menu' => 'your menu',
// [...] existing menu options
'items_wrap' => '<div><ul id="%1$s" class="%2$s">%3$s</ul></div>', // will put a div on ul
'before' => '<div>', // before the link
'after' => '</div>' // after the link
));
See https://codex.wordpress.org/Function_Reference/wp_nav_menu#Parameters
Related
Fiddle here: https://jsfiddle.net/mv5ut6sw/
I have a list of links at the top of my webpage contained in a <div>. I would like a horizontal <hr> line above and below this <div> to visually separate the links from the rest of the page. Simplified example:
<hr>
<div style="float:left; width:100%">
<div style="float:left; margin-right:20px">
<ul>
<li>Link1</li>
<li>Link2</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
</div>
<hr>
I am using bootstrap to pretty the page up. Without bootstrap, the <hr>s behave as expected, appearing above and below the link section. When I use bootstrap, however, the two horizontal lines both appear above the link section.
I am at a loss. I don't want to edit bootstrap code. Is there inline css I can include to fix this weird placement?
Its because floats take the elements out of the flow...either you can clear the float value clear:both or by applying overflow:hidden in the parent div...
Well If you are using bootstrap4 then why use floats...just Use d-flex class on the parent div
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<body>
<h3 style="background-color: lightgray; height: 40px; padding: 2px">
Ye old title
</h3>
<hr>
<div class="d-flex">
<ul>
<li>Race Entry</li>
<li>Start</li>
<li>Position Transfer</li>
<li>Contracts</li>
</ul>
<ul>
<li>Statements</li>
<li>Race Position</li>
<li>Advertising Firm</li>
</ul>
<ul>
<li>Report1</li>
<li>Report2</li>
</ul>
<ul>
<li>Settle it!</li>
<li>Upload</li>
<li>Search</li>
</ul>
</div>
<hr>
</body>
"Is there inline css I can include to fix this weird placement?"
It's because of the floats. Just clear the last <hr>..
<hr style="clear:both;">
https://jsfiddle.net/s9L0Lf9b/
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<body>
<h3 style="background-color: lightgray; height: 40px; padding: 2px">
Ye old title
</h3>
<hr>
<div style="float:left; width:100%;">
<div style="float:left; margin-right:20px">
<ul>
<li>Race Entry</li>
<li>Start</li>
<li>Position Transfer</li>
<li>Contracts</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Statements</li>
<li>Race Position</li>
<li>Advertising Firm</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Report1</li>
<li>Report2</li>
</ul>
</div>
<div style="float:left; margin-right:20px">
<ul>
<li>Settle it!</li>
<li>Upload</li>
<li>Search</li>
</ul>
</div>
</div>
<hr style="clear:both;">
</body>
"The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it." __ from MDN posted on a related question
P.S. - There's no need to use floats with Bootstrap 4.
I am currently coding a website for a school project, and I have boxes that grow on a mouse hover that are in a div. An example of one grow div:
<div class="grow">
<div class="title3">Experience</div>
<div class="mainbox">
<p class="text">Sample text.</p>
</div>
</div>
In here, I need a <li> to list my industry certifications, but then it won't validate. So I was trying this:
<div class="grow">
<div class="title3">Experience</div>
<div class="mainbox">
<p class="text"><li>
<ul>Sample</ul>
<ul>Sample</ul></li></p>
</div>
</div>
But then this doesn't validate. What should I do instead, or is there another good alternative to a list that looks good?
You are including an UL inside of a LI, you need revert. First you need add UL and inside of this tag, add the LI you need.
<div class="grow">
<div class="title3">Experience</div>
<div class="mainbox">
<ul>
<li>Sample 1</li>
<li>Sample 2</li>
<li>Sample 3</li>
</ul>
</div>
</div>
UL wraps LIs.
<ul><li>....</li></ul>
I am using tab through jquery now I want to add nested tab in tabs. MY problem is when I click on nested tab it will hide main tab and no content will show onclick on nested tab
Here is my code:-
<div id="tabs-container" class="TabView" >
<ul class="tabs-menu">
<li class="current">Guest</li>
<li>Owner</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>test></p>
<div id="subtab">
<ul class="tabs-menu">
<li>Me as Guest</li>
</ul>
<div id="subtab-1">test2</div>
</div>
</div>
Kindly advise me any solution.
Without seeing the jQuery part of the code nor the CSS we can only guess, anyway probably the problem is that you have to assign a different classname to the ul block in the nested tab. Like this:
<div id="tabs-container" class="TabView" >
<ul class="tabs-menu">
<li class="current">Guest</li>
<li>Owner</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">
<p>test></p>
<div id="subtab">
<ul class="subtabs-menu">
<li>Me as Guest</li>
</ul>
<div id="subtab-1">test2</div>
</div>
</div>
Code for multiple tabs on my page (displaying these tabs and content dynamically):
jQuery('.tab-block li a').click(function() {
var theitem = jQuery(this);
theitem.parent().parent().find("li").removeClass("active");
theitem.parent().addClass("active");
theitem.parent().parent().parent().parent().find(".tab-content > ul > li").removeClass("active");
theitem.parent().parent().parent().parent().find(".tab-content > ul > li").eq(theitem.parent().index()).addClass("active");
return false;
});
Code in my HTML to display tabs:
<div class="tab-block">
<div class="tabs">
<ul>
<li class="active">TAB 1</li>
<li>TAB 2</li>
</ul>
<div class="clear-float"></div>
</div>
<div class="tab-content">
<ul>
<li class="active">
<p><h3>Goole.com</h3></a>
<p>Content</p>
</li>
<li>
<p><h3>Goole.com</h3></a>
<p>Content</p>
</li>
</ul>
</div>
</div>
Now all tabs work great but no links will open (the H3 link within the tabs themselves). Any ideas what I'm doing wrong?
Thank you.
I don't know what your specific problem is, you may want to provide a link to a jsfiddle, to make yourself clear, but if you need tabs, try EZ tabs jQuery plugin.
HTML:
<div class="tab-block">
<div class="tabs">
<ul class='nav'>
<li>TAB 1</li>
<li>TAB 2</li>
</ul>
<div class="clear-float"></div>
</div>
<div class="tab-content">
<div class='box'>
<p>
<h3>Goole.com</h3>
</a>
<p>Content</p>
</div>
<div class='box'>
<p>
<h3>Goole.com</h3>
</a>
<p>Content</p>
</div>
</div>
</div>
jQuery, on document ready:
$('.tab-block').eztabs({
tabsList : 'ul.nav',
animation: 'slideLeftRight',
boxContainer: '.tab-content',
animationTime: 200
});
jsfiddle
how to make the listview to allow selection of only one item.i used a list with < a href="#">, just to show what item is been selected. but i want,only one item in the list to be selected. It should not allow me to select another element. Can some help help me out with this
Something like this?
http://jsfiddle.net/SJ3GU/1/
Listview Docs: http://jquerymobile.com/demos/1.0a4.1/docs/lists/index.html
<div data-role="page" id="home">
<div data-role="content">
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Ferrari</li>
<li>Click for more info on the Acura</li>
</ul>
</div>
</div>
<div data-role="page" id="acura">
<div data-role="content">
<ul data-role="listview">
<li>Back Home</li>
</ul>
</div>
</div>