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:
<!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>

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!

View Replies:
stewblack23 replied on at Permalink Reply
stewblack23
Most of the time when I do dropdown in C5 I use the Mega Menu 5.7 dropdown plugin. Then I just style it for the my needs. The second way is I inspect the output of the autonav block then go into the view.php file for the autonav block and add in the bootstrap classes that I need. Then style it based on bootstrap dropdown structure.

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...
MrKDilkington replied on at Permalink Reply
MrKDilkington
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.
programit replied on at Permalink Reply 1 Attachment
The code I use currently is manually editted similar to this:
<!-- 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>

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.
programit replied on at Permalink Reply 1 Attachment
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.
MrKDilkington replied on at Permalink Reply
MrKDilkington
@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.