Drop down menus when multiple pages used

Permalink Browser Info Environment
I want to have multiple pages. It seems the tabs work like this:

Single page - tabs take one to a spot lower down.
Multiple pages - tabs take you to different pages.

What would be needed to have the tabs at top bring up muiltiple pages, but each tab has dropdown menus to go to a specific place in that page (act like the single page)

I didn't see drop down option in Long Story short


Type: Pre-Sale
Status: In Progress
View Replies:
jordif replied on at Permalink Reply

yes, typical scenarios are:

1. Having a single page with the menu allowing to jump to a specific slide
2. Having multiple pages with the menu allowing you to go to a specific page

Acutally there are two separate areas in the nav bar: the Site Nav area and the Slides Nav area.
Have a look at this screenshot:http://concrete5.15robots.com/files/2614/1400/1327/lst-003.jpg...

Typically you would use only one area. But you could also use both, and have two menus side by side: one shared by all pages (with links to the differnt pages), and the other specific to each page (with links to the slides in each page).

As for your quesiton, the Site Nav area also supports dropdowns, in case you have subpages.

So to achieve what you want, you could add "fake" subpages using Concrete5's sitemap (you can add "external links" to the sitemap and they will appear there without the need of creating an actual page). So for instance I've added a page a couple of links to the demo's sitemap, under the "Split effect" page:


Each link takes you to a specific slide within the page.

Please let me know if you have any further questions,

leal replied on at Permalink Reply
OH Excellent - that slide says it all.

and am wondering if that other trick ("Page title minimize from slide to header") would work with multiple pages (I.E. - Works on the initial splash but then remains constant in the Site Name which is constant for all pages...)?
grafoman replied on at Permalink Reply 1 Attachment
I have a similar question, check the screenshot.

So when you click HOME, REALISATIES, ATELIER, SHOWROOM or CONTACT, you go to a specific slide. So this is Slide nav.
However, i have some subpages within REALISATIES. These are subpages, so they don't link to a slide, but to a new page.

How do i go about making this menu and the drop down effect? And how will this work in a responsive menu?

Thanks in advance!
jordif replied on at Permalink Reply

The "Slides Nav" block does not allow you to add submenu items pointing to other pages, so in this case the easiest way is to add an HTML block and insert the navigation manually.

You can use this code as a starting point:

<ul class="nav navbar-nav">
   <li><a href="#slide1" class="goto-slide">Slide 1</a></li>
   <li><a href="#slide2" class="goto-slide">Slide 2</a></li>
   <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Submenu <b class="caret"></b></a>
   <ul class="dropdown-menu">
   <li><a href="http://www.example.com/subpage1">Subpage 1</a></li>
   <li><a href="http://www.example.com/subpage2">Subpage 2</a></li>

The theme is based on Bootstrap, so you can use the markup that Bootstrap uses for navigation bars (http://getbootstrap.com/components/#navbar... ).

You can then add links to other pages ( href="http://www.example.com" ) or to slides within the page ( href="#slide1" ). You only need to make sure you add the class "goto-slide" to links that point to other slides (so they smoohtly scroll to the slide).


grafoman replied on at Permalink Reply

This worked out for me, thanks!

Is it possible to add an active state to the links (so when you are scrolling down to slide 2, the link in the menu for slide 2 changes color for example).

Working at:http://grafomancommunication.be/...

jordif replied on at Permalink Reply
Oh yes, I forgot about that. Edit the HTML block with your nav and change the first line to:

<ul class="nav navbar-nav lss-slides-nav">
grafoman replied on at Permalink Reply
Thanks! The dropdown navigation stopped working for some reason. When i inspect i get 2 errors:
Uncaught TypeError: Cannot read property 'top' of undefined
Uncaught Error: Syntax error, unrecognized expression: http://www.example.com/subpage2
jordif replied on at Permalink Reply
Oops, yes, sorry!

Instead of adding the class "lss-slides-nav", add a different class, for instance "custom-slides-nav":

<ul class="nav navbar-nav custom-slides-nav">

Next edit the main.js file, find line 123 and change it to:

if ( $('.onpage-nav .custom-slides-nav').length > 0 ) {

That should do it,

grafoman replied on at Permalink Reply
Works, thank you!

concrete5 Environment Information


Browser User-Agent String

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You have not specified a license for this support ticket. You must have a valid license assigned to a support ticket to request a refund.