I have my website here - http://thezoomer.net/clubroyale/
if you look at the submenu from ABOUT US or at the CONTACT US menu item with Firebug, you will see Cufon draws unnecessary canvases.
Any idea ? Thanks!
A solution I found is to get rid of all whitespace in the HTML, so this:
<li class="dir nav-item">ABOUT US
<div class="subnav-con">
<div class="nav-top">
</div>
<ul class="nav">
<li class="nav-item">HISTORY</li>
<li class="nav-item">VISION</li>
<li class="dir nav-item">TEAM
</li>
<li class="nav-item">CLIENTS</li>
<li class="nav-item">TESTIMONIALS</li>
<li class="nav-item">PRESS</li>
<li class="nav-item">FAQ</li>
</ul>
<div class="nav-bottom"></div>
</div>
</li>
becomes this:
<li class="dir nav-item">ABOUT US<div class="subnav-con"><div class="nav-top"></div><ul class="nav"><li class="nav-item">HISTORY</li><li class="nav-item">VISION</li><li class="dir nav-item">TEAM</li><li class="nav-item">CLIENTS</li><li class="nav-item">TESTIMONIALS</li><li class="nav-item">PRESS</li><li class="nav-item">FAQ</li></ul><div class="nav-bottom"></div></div></li>
There's possibly a neater way involving CSS, but I'm not going to look for it unless you really want me to.
Related
How can I delete all thoses div around my menu create with menu_block for drupal 7 ?
I want to change this :
<div class="region region-nav">
<div class="content">
<div class="menu-block-wrapper menu-block-3 menu-name-menu-prive parent-mlid-0 menu-level-2">
<ul class="menu">
<li class="first expanded menu-mlid-559" style="width: 397px;">
Avantages
<ul class="menu">
<li class="first leaf menu-mlid-596">
Ecologie
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
into this :
<ul class="menu">
<li>
link
<ul class="menu">
<li>
link
</li>
</ul>
</li>
</ul>
Thank you
You will need to add new templates for your block and the region that holds it, in order to get rid of some of the markup.
Take a look at Drupal 7 Template Suggestions
Your block template name would look like this: block--menu-block.tpl.php. And for the markup, can be just
<?php print $content ?>
The region template name would look like this `region--YOUR_REGION_NAME.tpl.php``. And for the markup, can be just
<?php print $content ?>
(Don't forget to flush the caches after adding the new templates)
I'm building a LHN in Sitefinity and ran into an issue styling it. When a page is set as the active page, it gets the sfsel class. Unfortunately, it also applies it to the parent page when a subpage is active. I need to get the styling so when a subpage is active, only that list item is highlighted, but when only the parent "About" page is active, it still gets highlighted.
http://jsfiddle.net/4NnaZ/1/
<div class="sfNavWrp sfNavTreeviewWrp leftnav">
<div class="k-widget k-treeview" tabindex="0" role="tree" aria-activedescendant="C001_ctl00_ctl00_navigationUl_tv_active">
<ul class="sfNavTreeview sfNavList k-group k-treeview-lines" id="C001_ctl00_ctl00_navigationUl" data-role="treeview">
<li class="k-item k-first k-last" data-uid="ceac0efa-1b50-46c7-a351-945f05a6eb87" role="treeitem" data-expanded="true" aria-expanded="true">
<div class="k-top k-bot"><span class="k-icon k-minus"></span><a class="sfSel k-in" href="../about">About</a>
</div>
<ul id="C001_ctl00_ctl00_ctl03_ctl00_childNodesContainer" class="k-group" style="display: block;">
<li class="k-item" data-uid="3b1f4e90-1945-4c93-a770-43787527d7bf" role="treeitem" id="C001_ctl00_ctl00_navigationUl_tv_active">
<div class="k-top"><a class="sfSel k-in k-state-focused" href="locations">Locations</a>
</div>
</li>
<li class="k-item" data-uid="48d48d44-55ee-4bf7-9fcd-20380c18b991" role="treeitem">
<div class="k-mid">Careers
</div>
</li>
<li class="k-item" data-uid="267e4a18-8489-45c2-bef3-1efcba63916f" role="treeitem">
<div class="k-mid">Producer Board
</div>
</li>
<li class="k-item k-last" data-uid="d75d7989-3815-49b3-856c-c4d24dcd5dc8" role="treeitem">
<div class="k-bot">Contact Information
</div>
</li>
</ul>
</li>
</ul>
</div>
isn't k-state-focused the class you should use to highlihgt only current link/page ?
I believe this is a jQuery script producing this classname.
You can modify your code to set a class for that purpose , http://www.sitefinity.com/developer-network/forums/general-discussions-/highlight-current-page
I have the below HTML which I want to translate into wordpress function "**wp_nav_menu()**"
<ul class="nav navbar-nav">
<li id="about-menu">
About Us
<div id="about-us">
.....
inner div(s) and
Paragraphs etc
......
</div>
</li>
<li id="contact-menu">
Contact Us
<div id="contact-us">
.....
inner div(s) and
Paragraphs etc
......
</div>
</li>
<li>News</li>
</ul>
Any Idea on how to do it?
You can create a custom nav walker. There are no docs on wordpress.org, but you could simply take a look at an existing walker
OK, i have no idea how it append, this form : http://xquives.kiaistudio.com/new-form/index.php have a two column field. But in IE7 it's in one column, but not in ie8 or 9 or FF of chrome. Can you please tell me what BAD i have done, or how to make IE behave like normal browser. I have take more that 2 hours testing... and i have NO IDEA where to look !
You're markup doesn't lend itself well to crappy ie7. You're markup looks generally like this:
<ul>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
<li style="float:left width:50%">stuff</li>
</ul>
This is pretty error prone.
You'd be better off with parent containers that drive the columns like so:
<div style="width: 50%; float: left">
<ul>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
<li class="left-column-lis">stuff</li>
</ul>
</div>
<div style="width: 50%; float: left">
<ul>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
<li class="right-column-lis">stuff</li>
</ul>
</div>
EDIT: if you're married to this markup structure, you can hack ie7 by adding:
UL{*overflow:visible;}
.autocolumn LI {*width: 48%;}
The better thing to do is layout your columns in a way like i've described above
I'm creating my own wordpress template and I've coded a jQuery drop down menu that works statically but now I'm trying to make it dynamic the css is messed up. The drop down works but the menu doesn't displaying correctly.
The main menu displays vertical instead of horizontal and the secondary menu is horizontal, instead of vertical. Also the orange type for the main menu isn't displaying.
Here's a working static version
I hope I'm explaining myself thoroughly, if you need any more info please let me know.
Here is my wordpress template code
<div class="box">
<ul id="ldd_menu" class="ldd_menu">
<li>
<span>Menu</span>
<!-- Increases to 510px in width-->
<div class="sub_wrap">
<div class="ldd_submenu">
<nav>
<li class="ldd_heading"></li>
<?php wp_nav_menu(array('menu' => 'main_nav')); ?>
</nav>
<a class="ldd_subfoot" href="#"> Accessibility Link</a>
</div>
</li>
</ul>
</div>
<div></div>
I would suspect your code is not handling the output format of the wp_nav_menu method. Now I am not sure of your exact version, but newer versions will out put like this. So you will get extra div added in that you might not expect and the way the child menus are output may not be what you expect. Also, as the previous people said your code is not quite right, missing some tags.
<div class="menu-id-container">
<ul class="nav-menu" id="menu-id">
<li class="..." id="..">LINK
<ul class="sub-menu">
<li>Child LINK1</li>
</ul>
</li>
<li class="..." id="...">LINK2</li>
</ul>
</div>