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.
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
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