Sliding Header/Main Menu Using jQuery
Permalink
Today's adventure is to create a header element that contains the main menu which initially only displays a color bar across the top of the page with a menu indicator (attached file: visible menu bar.jpg) ... When clicked, the menu slides down into the page revealing/displaying the main menu along with other header elements (attached file: sliding_header_area.jpg).
So initially I was going to just use the header.php file but now taking the approach that I need a separate PHP file to "call" for the sliding element... Is this the right approach? And if so, how to make it work within the header.php file is my real challenge?
Any help will be appreciated... tga
So initially I was going to just use the header.php file but now taking the approach that I need a separate PHP file to "call" for the sliding element... Is this the right approach? And if so, how to make it work within the header.php file is my real challenge?
Any help will be appreciated... tga
No worries... thanks for the response.... I will take a look at it and let you know if I have any questions.... I ended up putting this aside earlier today and starting looking at the page type setups that I need to do... ;-)
Thanks again!
Thanks again!
So the file you provided... it should be renamed so that it is a .JS file, correct? And it should be uploaded into the JS folder within the "root", right?
Thanks.
Thanks.
Nope. The file is just an HTML page. If you rename it slideToggle.html and save it to your desktop and double-click on it, you will see the magic happen.
How you incorporate this into your page is up to you. I assume you are modifying the page type files or the footer.php and so the javascript block at the bottom of my file would go in the footer.php and you would ID the divs surrounding your hidden menu accordingly.
How you incorporate this into your page is up to you. I assume you are modifying the page type files or the footer.php and so the javascript block at the bottom of my file would go in the footer.php and you would ID the divs surrounding your hidden menu accordingly.
Sorry, I see you want this to be in the header but I would still put the javascript code in the footer.php. Pages render faster with js at the bottom.
yes... this is the header for the site along with the header menu.... so it will still work even though the js code is in the footer?? that seems a bit odd but I am sure it works...
The page is assembled and rendered as a complete package by combining your header.php, your page type file (like left_sidebar.php) and finally your footer.php. jQuery does it's magic by attaching actions to specific divs so the div's need to exist on the page before jQuery can attach itself to those divs. That's why it's best to put javascript after all the elements have been created.
I'm aware of the page rendering process... so that's why I felt it made sense but still odd... ;-)
So basically the DIV information and/or any other specific code for the header display... and then the JS in the footer... I will give it a look at tomotrow when I have some energy and hope to crank it out tomorrow...
Thanks...
So basically the DIV information and/or any other specific code for the header display... and then the JS in the footer... I will give it a look at tomotrow when I have some energy and hope to crank it out tomorrow...
Thanks...
Just took a sneak peek and saw that the menu content toggles down from the menu bar.... Is it easy to reverse that so that the menu bar (the orange bar in this case) slides down to reveal the header contents as shown in my initial examples?
Sure... edit my file and move the div containing the "Menu" link underneath the div containing the hidden menu contents.
Man o' man... I can taste victory on the horizon... Now that I've played with it... I will start incorporating it into the HEADER and FOOTER php files and see what transpires... ;-)
Good morning.... already tried this a couple times and not working... Now I don't see anything when I load the page whereas before I was seeing the footer navbar section as well as what I had started to work on for the header section...
I have attached both the header.php and footer.php files so you can take a look... I'm sure I'm doing something wrong... it always seems to be something minor... *sigh*
I have attached both the header.php and footer.php files so you can take a look... I'm sure I'm doing something wrong... it always seems to be something minor... *sigh*
Excellent job!
Try making sure that the '<?php Loader::element('footer_required'); ?>' is just above the closing </body> tag so the bottom of footer.php looks like this:
Try making sure that the '<?php Loader::element('footer_required'); ?>' is just above the closing </body> tag so the bottom of footer.php looks like this:
.
.
.
</div>
<script type="text/javascript">
$("#menu_link").click(function () {
$("#slide_menu").slideToggle("fast");
});
</script>
<?php Loader::element('footer_required'); ?>
</body>
</html>
Really appreciate the vote of confidence.... I made that minor change to the footer you suggested and still not seeing anything... just a blank page when trying to load the site... :-\
Right-click on the page and choose "Inspect Element" and then choose the 'Console' tab to see if there are any JavaScript errors. I built a page with your header.php and footer.php and it works.
You have your old autonav template error again:
Recode it to templates/breadcrumbs for now. Let's deal with one problem at a time.
Fatal error</b>: Call to undefined method AutonavBlockController::getNavItems() in <b>/home/tgadams/readtheinstructionscarefully.com/style/blocks/autonav/templates/horizontal.php</b>
Recode it to templates/breadcrumbs for now. Let's deal with one problem at a time.
Nifty little resource... I had seen it before but wasn't sure how to use it effectively... I am seeing that 3 images are broken/not found even though they have been uploaded to the domain already... maybe it's simply the path but the path is the same as another image file which is not "broken"...
And then there is an error for
Hmmmmmmmm....
And then there is an error for
classname: 'ddsmoothmenu', //class added to menu's outer DIV
Hmmmmmmmm....
These all could be because your page is failing early in the rendering with the autonav error I posted above. You see this kind of error by right-clicking and choosing "View Page Source".
Missing images won't kill the page.
By the way, how do you work with such a slow server? That would drive me crazy.
Missing images won't kill the page.
By the way, how do you work with such a slow server? That would drive me crazy.
Let me check the settings for that particular domain... might need to adjust something... it's normally not this slow...
Okay... I'm starting to see things.... Not seeing the entire footer content only the orange footer menu bar... the admin bar below it is not displaying...
I am barely seeing the header/menu bar... not seeing the orange bar but do see the "menu" image (but broken)... I am able to click on it for the slider header to display... with all the images broken but the menu items are showing... but not in the position I want....
Hmmmmmmmm....
I am barely seeing the header/menu bar... not seeing the orange bar but do see the "menu" image (but broken)... I am able to click on it for the slider header to display... with all the images broken but the menu items are showing... but not in the position I want....
Hmmmmmmmm....
If those are hard-coded images then you need to get them like this:
<img src="<?php echo $this->getThemePath();?>/images/image.png">
If you don't then it looks at the domain/images/image.png
<img src="<?php echo $this->getThemePath();?>/images/image.png">
If you don't then it looks at the domain/images/image.png
Getting closer... had already figured out the image issue by looking at another site I host... phew... however, things are still not displaying entirely like I had designed the header to be displaying...
Fracken... fricken... frocken... *sigh*
Fracken... fricken... frocken... *sigh*
Okay... getting even closer.... I have fixed the image issue... got the header area to align correctly... but the orange bar is still not showing (marked with a long orange bar in attached) for the "menu" piece at the top... and the main menu (in green circle) is not positioning where it's coded to be (red arrow to other box to indicate desired position)...
Also I noticed that for some reason "HOME" is not appearing in the menu either which is needed...
The other item is that the header is now affecting the display of the footer bar where the text/links should be black with no underlines... I'm sure it's a "style.css" setting somewhere which I think is happening with mainMenu... but still trying to resolve that one...
Please see attached...
Also I noticed that for some reason "HOME" is not appearing in the menu either which is needed...
The other item is that the header is now affecting the display of the footer bar where the text/links should be black with no underlines... I'm sure it's a "style.css" setting somewhere which I think is happening with mainMenu... but still trying to resolve that one...
Please see attached...
I am surprised I have even a strand of hair left at this point... I just clicked through to an inside page and the header/slider piece is displaying correct all except for the issue with the main menu displaying correctly and in the correct position...
Wonder why the header is not displaying correctly for the home page...
Wonder why the header is not displaying correctly for the home page...
Eureka!!!! I got everything going Michael.... The only thing left to resolve is the display of the menu items/hyperlinks... but otherwise, the header piece is correct now... wow!!! Can't believe it...
Much much appreciation for your helping hand... You have no idea!!
Much much appreciation for your helping hand... You have no idea!!
Nicely done! Your skill set is expanding by the minute.
Now you really need to bug your host about that slow server. My mind wanders sometimes so by the time a page refreshes on a slow server, I have forgotten why I was refreshing the page.
Now you really need to bug your host about that slow server. My mind wanders sometimes so by the time a page refreshes on a slow server, I have forgotten why I was refreshing the page.
Not sure what the slowness could be... I did turn off the cache for the site yesterday while I am developing... plus it seems to have sped up some after narrowing things down and removing some lines of code that don't appear to be needed....
Still messing with trying to fix this menu display of underlined links and such... It's probably something really simple... but finding it is the hitch... it has to be something with the header area because the footer menu was fine until the header started working correctly... now the header menu and the footer menu are displaying wrong... Hopefully I'll resolve it here soon...
I will still reach out to my host provider for some answers... another item that's currently changed is the PHP setting as I do not have the FastCGI on... but will turn it back on eventually...
Still messing with trying to fix this menu display of underlined links and such... It's probably something really simple... but finding it is the hitch... it has to be something with the header area because the footer menu was fine until the header started working correctly... now the header menu and the footer menu are displaying wrong... Hopefully I'll resolve it here soon...
I will still reach out to my host provider for some answers... another item that's currently changed is the PHP setting as I do not have the FastCGI on... but will turn it back on eventually...
In my experience a server that's as slow as your's cannot be fixed by anyone else but your host. Once your host has gotten your TTFB ('Time To First Byte') down to below 5 seconds, then perhaps your tweaks can shave a couple more seconds off (maybe) but when you're looking at a TTFB of over 30 seconds, only the host can fix that.
You thought jQuery was an adventure... just type 'TTFB' into the C5 forum search and see what you can get yourself into.
You thought jQuery was an adventure... just type 'TTFB' into the C5 forum search and see what you can get yourself into.
Hey Michael... thought I would let you know that I got with my hosting provider and the restarted the apache instance for the domain in question.... what a major difference that made!! ;-)
hey man... any ideas as to why I cannot get this underline removed from both menus? I have gone through the entire style.css file and made sure anything and everything related to text rendering and/or hyperlinks is set to "text-decoration:none;"... at a loss at this point...
Here's another trick...
Right-click on a menu item and choose "Inspect Element". In the window to the right, all the css rules for the DOM elements are shown there and it shows the css file name that contains the rule.
To answer your question, you need to add this to your style.css
You just has "text-decoration:none" without the 'a'
Right-click on a menu item and choose "Inspect Element". In the window to the right, all the css rules for the DOM elements are shown there and it shows the css file name that contains the rule.
To answer your question, you need to add this to your style.css
#mainMenu a {text-decoration:none}You just has "text-decoration:none" without the 'a'
I added the extra line of code to the style.css page....
And then I did the Inspect Element again on one of the hyperlinks... it's showing that it's being driven by the "User Agent Stylesheet"... what the heck is that?
And then I did the Inspect Element again on one of the hyperlinks... it's showing that it's being driven by the "User Agent Stylesheet"... what the heck is that?
That's the default action taken by your browser unless you tell it otherwise.
That line should go at the very end of style.css to override anything else that might be in the css above it.
Refresh the page with CTRL-F5. Browsers tend to cache css even when you have it's cache off.
That line should go at the very end of style.css to override anything else that might be in the css above it.
Refresh the page with CTRL-F5. Browsers tend to cache css even when you have it's cache off.
Man... that finally did the trick... I actually it for both mainMenu and subnav just for extra measure.... One more thing out of the way... now I can focus on the Page Type setup work... I do have a couple questions about that but I will start a separate post when I get rolling on that again... ;-)
Again... appreciate it!!!
Again... appreciate it!!!
Rename the attached file to slideToggle.html and fire it up in your browser to see how jQuery's 'slideToggle' function works.
I have also attached an image that helps show where the div ID's goes in the jQuery code.
If you incorporate this code into your site, make sure you DO NOT include the line that loads jQuery. C5 already loads it.