Drop down menus
Permalink
Is there any tutorials to create a drop down menu can be used with 5.8.3.1 etc with autonav.
In straight html its seems quite easy to add a simple bootstrap drop down menu and on one site I manage with C5 I actually use straight code to create a menu as whenever I try to use autonav it just fails miserably.
Worst part is I have to constantly edit menus as pages change.
Going by simple demos using bootstrap to do it in html is:
Besides adding the appropriate c5 editing and template code to make editable blocks, how would you convert this simple menu test to C5.
I have found a couple of tutorials in the older concrete5 and I especially miss the customisation that was available compared to the new, BUT that's progress - I assume.
I've spent nearly 2 days solid, just trying to get a drop down menu in a custom template, and have tried nearly all the suggestions and tutorials I could find including adding templates to blocks/autonav etc and the sooperfish tutorial etc to no avail. None seem to work in 5.8.3.1!
In straight html its seems quite easy to add a simple bootstrap drop down menu and on one site I manage with C5 I actually use straight code to create a menu as whenever I try to use autonav it just fails miserably.
Worst part is I have to constantly edit menus as pages change.
Going by simple demos using bootstrap to do it in html is:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Example of Bootstrap 3 Dropdowns within Buttons</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <style type="text/css"> .bs-menu{ margin: 20px; } </style>
Viewing 15 lines of 50 lines. View entire code block.
Besides adding the appropriate c5 editing and template code to make editable blocks, how would you convert this simple menu test to C5.
I have found a couple of tutorials in the older concrete5 and I especially miss the customisation that was available compared to the new, BUT that's progress - I assume.
I've spent nearly 2 days solid, just trying to get a drop down menu in a custom template, and have tried nearly all the suggestions and tutorials I could find including adding templates to blocks/autonav etc and the sooperfish tutorial etc to no avail. None seem to work in 5.8.3.1!
Hi programit,
How and where will you being using the Bootstrap drop-downs?
Can you include example screenshots of what you are trying to make, please.
How and where will you being using the Bootstrap drop-downs?
Can you include example screenshots of what you are trying to make, please.
The code I use currently is manually editted similar to this:
This gives me multiple submenus and uses nothing more than bootstrap3, jquery with the smartmenu addon.
Simple to use and simple to design in html.
Using autonav, I a completely stumped on getting it to do even a single sub-menu.
<!-- Navbar fixed top --> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-collapse collapse"> <!-- Left nav --> <ul class="nav navbar-nav"> <li><a href="http://localhost/concrete5/index.php?cID=173">Page 1</a></li> <li><a href="http://localhost/concrete5/index.php?cID=174">Page 2</a></li> <li><a href="http://localhost/concrete5/index.php?cID=175">Page 3</a></li> <li><a href="#">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="http://localhost/concrete5/index.php?cID=176">Page 4</a></li> <li><a href="http://localhost/concrete5/index.php?cID=177">Page 5</a></li> <li><a href="http://localhost/concrete5/index.php?cID=178">Page 6</a></li> <li class="divider"></li>
Viewing 15 lines of 36 lines. View entire code block.
This gives me multiple submenus and uses nothing more than bootstrap3, jquery with the smartmenu addon.
Simple to use and simple to design in html.
Using autonav, I a completely stumped on getting it to do even a single sub-menu.
I've basically given up on the current theme in development and going to have to start again, as I have tried so many mods and css tweaks that the colors have gone haywire etc. so I've had to wind it back about to pre new year.
Bit annoying because I had most things working ---- EXCEPT for the *&$^#)$% menu!
I know its probably something basic but I just can not see ATM. I've spent 4 days so far and getting nowhere.
Anyway, I'm going to create the basis for a new theme version with nothing editable except for a menu.
Hopefully then I can get that working and then build around the menu and can actually get my templates, and sites, to update menu automatically rather than having to update through the template.
The menu my original design uses is a basic bootstrap 3 menu as shown in the attachment.
Thanks for the help so far.
Bit annoying because I had most things working ---- EXCEPT for the *&$^#)$% menu!
I know its probably something basic but I just can not see ATM. I've spent 4 days so far and getting nowhere.
Anyway, I'm going to create the basis for a new theme version with nothing editable except for a menu.
Hopefully then I can get that working and then build around the menu and can actually get my templates, and sites, to update menu automatically rather than having to update through the template.
The menu my original design uses is a basic bootstrap 3 menu as shown in the attachment.
Thanks for the help so far.
@programit
What you are describing can be done by creating a custom template for the Auto-Nav block.
https://documentation.concrete5.org/developers/working-with-blocks/w...
By default, the Auto-Nav block creates an unordered list of list items and links. The list, list items, and links can be styled with CSS to create a drop-down menu. You can also add JavaScript to add additional behaviors.
Your drop-down example requires specific HTML and CSS classes. This means you will need to customize the Auto-Nav view template. The Auto-Nav view.php file includes code comments that will show you how to customize it. I recommended doing a forum search for examples of customizing Auto-Nav files.
concrete\blocks\autonav\view.php
Depending on how the navigation CSS is written, you may need to change the HTML and CSS classes surrounding the global area that the navigation will be added to.
What you are describing can be done by creating a custom template for the Auto-Nav block.
https://documentation.concrete5.org/developers/working-with-blocks/w...
By default, the Auto-Nav block creates an unordered list of list items and links. The list, list items, and links can be styled with CSS to create a drop-down menu. You can also add JavaScript to add additional behaviors.
Your drop-down example requires specific HTML and CSS classes. This means you will need to customize the Auto-Nav view template. The Auto-Nav view.php file includes code comments that will show you how to customize it. I recommended doing a forum search for examples of customizing Auto-Nav files.
concrete\blocks\autonav\view.php
Depending on how the navigation CSS is written, you may need to change the HTML and CSS classes surrounding the global area that the navigation will be added to.
Here is the link for the Mega Menu plugin. Its worth the money and the time you save trying to built it yourself.
https://www.concrete5.org/marketplace/addons/mega-menu1...