Hi,
I'd like to create a simple dropdown menu next to Merchant A-Z within the menu bar containing links to pages I've created using example.php
Any guidance would be appreciate.
Regards,
Stuart.
Spot on as always.
Thank you very much David.
Hello David,
When i insert te code. the menu isn't collapse when i go with the mouse over it of click on it.
Thanks Jan Roel
it only happens on the index page. Thanks
Hello Jan,
I know from another topic that you are using PHP conditional blocks to show / not show content depending on whether your visitor is on the index page or not.
The drop-down menus require Foundation's JavaScript top level function to be called, which is the following code in html/footer.php
<script>
$(document).foundation();
</script>Double check that none of your conditional code has prevent the above from being invoked on your index page - make sure that the above is the last thing before the closing </body> tag in html/footer.php and that should be all it is...
Cheers,
David.
--
PriceTapestry.com
This feature is what I have been looking for--Excellent David!
One little modification to make if you can:
How can I control the control the spacing between rows <Li>'? I want to narrow it a little bit. I tried this, but could not control the gap between rows:
<li class="has-dropdown" style="">
<a href="#">My Menu</a>
<ul class="dropdown">
<style type="text/css">
<ul style="line-height: 80%">
</style>
<li><a href="example1.php">Item 1</a></li>
<li><a href="example2.php">Item 2</a></li>
</ul>
</li>Many thanks.
Yohannes
Hello Yohannes,
Have a go adding the following to your html/default.css
.dropdown li a {
line-height: 80% !important;
}...or as required.
( the end of default.css has a section commented /* foundation overrides */ )
Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Thank you David,
That has allowed me to play around the Dropdown Menu.
This worked perfect for me
.dropdown li a {
line-height: 130% !important;
}Cheers!
Yohannes
Hello Stuart,
Sure - here's the code for a drop-down menu with two example links.
<li class="has-dropdown"><a href="#">My Menu</a>
<ul class="dropdown">
<li><a href="example1.php">Item 1</a></li>
<li><a href="example2.php">Item 2</a></li>
</ul>
</li>
Within html/menu.php you'll find the containing <ul> at line 17:
<ul class='left'>Insert the code above immediately before the corresponding closing </ul> at line 39.
Alternatively, if you wanted to have a drop-down menu or items on the right of the nav bar, (like the Voucher Codes link on the demo site) then immediately after the closing </ul> of the left menu group create a new <ul> for the right section e.g.
<ul class='right'><!-- right menu <li>...</li> items here -->
</ul>
If you wanted to embellish your links with CSS icons the template includes Foundation's Icon Fonts 3 - you can view the full icon set here;
http://zurb.com/playground/foundation-icon-fonts-3
They are included by way of the <i> tag, for example the Voucher Codes link on the demo site is created as follows:
<li><a href='/vouchers.php'><i class='fi-ticket'></i> Voucher Codes</a>Hope this helps!
Cheers,
David.
--
PriceTapestry.com