Sooperfish Custom Template wants to make me cry
Permalink 1 user found helpful
Hi All- I have done fairly extensive reading but I am sssstttuuucccckk! Torn what little hair I have left out - wish I understood things a little clearer.
My aim - to create a custom template for autonav using sooperfish (yawn - I know everyone asks about this - but no documentation seems totally complete at my level)
I have been following this guide closely plus then searching the forums -http://www.packtpub.com/article/concrete5-mastering-autonav-for-adv...
WHERE I AM AT - I have created the custom template and called it from my hardcoded block. The CSS is being referenced so the menu is styled and works as a plain CSS menu, however the JS is not being called.
I am using jordanlev's updated autonav view.php, I have then updated the .ul class to be ul.sf-menu in the view.php file. I have done the same in the view.js file
I am devving this on a localhost setup so I have attached a copy of the folder that is located at
blocks>autonav>templates>
If there is any chance some wiser person could diagnose what I have done wrong I will endeavour to flesh out the documentation on this to make it clearer for all newbies.
Thanks
My aim - to create a custom template for autonav using sooperfish (yawn - I know everyone asks about this - but no documentation seems totally complete at my level)
I have been following this guide closely plus then searching the forums -http://www.packtpub.com/article/concrete5-mastering-autonav-for-adv...
WHERE I AM AT - I have created the custom template and called it from my hardcoded block. The CSS is being referenced so the menu is styled and works as a plain CSS menu, however the JS is not being called.
I am using jordanlev's updated autonav view.php, I have then updated the .ul class to be ul.sf-menu in the view.php file. I have done the same in the view.js file
I am devving this on a localhost setup so I have attached a copy of the folder that is located at
blocks>autonav>templates>
If there is any chance some wiser person could diagnose what I have done wrong I will endeavour to flesh out the documentation on this to make it clearer for all newbies.
Thanks
YES YES YES!!!
That actually wasn't the whole fix.
So I have made a few changes - the one you suggested.
I have also added the id="nav" to the view.php file so it read:
echo '<ul class="sf-menu" id="nav">'; //opens the top-level menu
And most importantly I have amended the view.js file to only be the basic JS call for sooperfish so iy just reads
$(document).ready(function() {
$('.sf-menu').sooperfish();
});
I don't know why - and I tried commenting it out line by line, but the advanced options calls seem to break the JS. I am therefore tweaking my options in the source sooperfish.js file, not ideal I guess, but its working so thankyou.
For all those out there who want to do this - here is the finished package with Jordan's revised autonav template and the sooperfish install.
Plonk this file in the blocks folder or C5 and you are away with a custom template.
That actually wasn't the whole fix.
So I have made a few changes - the one you suggested.
I have also added the id="nav" to the view.php file so it read:
echo '<ul class="sf-menu" id="nav">'; //opens the top-level menu
And most importantly I have amended the view.js file to only be the basic JS call for sooperfish so iy just reads
$(document).ready(function() {
$('.sf-menu').sooperfish();
});
I don't know why - and I tried commenting it out line by line, but the advanced options calls seem to break the JS. I am therefore tweaking my options in the source sooperfish.js file, not ideal I guess, but its working so thankyou.
For all those out there who want to do this - here is the finished package with Jordan's revised autonav template and the sooperfish install.
Plonk this file in the blocks folder or C5 and you are away with a custom template.
PS - for those who were stuck and want to do this yourselves, this tutorial is more helpful. These files here differ as they dont call the original autonav view template but use the cleaner friendlier one Jordan made.
http://www.codeblog.ch/2011/12/concrete5-sooperfish-drop-down-navig...
http://www.codeblog.ch/2011/12/concrete5-sooperfish-drop-down-navig...
A further question actually to help take this to the next level - from what I see it doesn't look totally possible, but I a wondering does anyone think that they could tweak this to call a page attribute image so we could use them as nav icons styled next to each item?
I think that would need an update to Jordan's autonav template - any suggestions would be grand.
I think that would need an update to Jordan's autonav template - any suggestions would be grand.
$(document).ready(function() {
$('.sf-menu').sooperfish();
});
Let me know how you get on.