Multi Level Navigation

Kris

unread,

Jan 21, 2021, 7:46:44 AM1/21/21

to marzipano

Hello.

Firstly, love Marzipano.

But I need a form of multi-level menu navigation for a large project that I am attempting as it will include too many scenes to include without any sub division.

For example, if it was a university, it might have multiple levels such as:

Academic

- Lecture Theatre

- Seminar Room

- Laboratory

- Library

Social

- Cafeteria

- Union

- Playing Field

Accommodation

- Bedroom

- Shared Kitchen

- Launderette

etc etc etc

How have people approached this using Marzipano before?

Is it possible to make a form of navigation using our current list of scenes interface, but perhaps with accordion style drop-downs for each sub section?

I have thought about splitting it up entirely into different virtual tours - e.g. a tour for Academic, a tour for Social areas etc, but that brings the problems of how to link between them and have a first initial index tour.

Also, on a side note, Marzipanos with a large number of multiple scene panoramas that I have seen on mobile lose the background shading effect if the list becomes so large that it scrolls off the initial view (see attachment). Has anybody else noticed this in the attached image and have a means of correcting it?

Thanks all for any help you can give.

Kris.

BackgroundEffectDisappearance.JPG

Joost

unread,

Jan 21, 2021, 10:43:03 AM1/21/21

to marzipano

Hi Kris,

There are probably better ways to do this dynamically, but here's a quick way to do it hardcoded. I also did some tweaking, check my steps below.

I uploaded my example, it can be viewed here; https://www.qbasiq.com/example360menu/

What I did:

Added a (simple) nested menu to my index.html file, you can also view this in the source of the website above.

Also note that I have give it the ID "sceneList2". sceneList is the original one used by Marzipano. I pasted the urls from the original SceneList in the menu links.

<li><a>Outside the park</a>

<li><a href="javascript:void(0)" class="scene" data-id="0-r0010044">Scene 1</a></li>

</ul>

</li>

<li><a>Inside the park</a>

<li><a href="javascript:void(0)" class="scene" data-id="1-r0010047">Scene 2</a></li>

<li><a href="javascript:void(0)" class="scene" data-id="2-r0010048">Scene 3</a></li>

</ul>

</li>

</ul>

</nav>

Second I added the CSS of the menu. I specifically added z-index:1 so that the menu will hover on top.

.dropdownmenu ul, .dropdownmenu li {

margin: 0;

padding: 0;

z-index:1;

}

.dropdownmenu ul {

background: gray;

list-style: none;

width: 100%;

}

.dropdownmenu li {

float: left;

position: relative;

width:auto;

}

.dropdownmenu a {

background: #30A6E6;

color: #FFFFFF;

display: block;

font: bold 12px/20px sans-serif;

padding: 10px 25px;

text-align: center;

text-decoration: none;

-webkit-transition: all .25s ease;

-moz-transition: all .25s ease;

-ms-transition: all .25s ease;

-o-transition: all .25s ease;

transition: all .25s ease;

}

.dropdownmenu li:hover a {

background: #000000;

}

#submenu {

left: 0;

opacity: 0;

position: absolute;

top: 35px;

visibility: hidden;

z-index: 1;

}

li:hover ul#submenu {

opacity: 1;

top: 40px; /* adjust this as per top nav padding top & bottom comes */

visibility: visible;

}

#submenu li {

float: none;

width: 100%;

}

#submenu a:hover {

background: #DF4B05;

}

#submenu a {

background-color:#000000;

}

Third, in index.html I have hidden the old Scenelist, Titlebar and Autorotate by adding the tag; style="display: none"

You can't just delete the old sceneList because it causes JavaScript errors

Four, in index.js I have added another scenes.forEach clause right under the original one to make the new menu clickable in scenelist2.

scenes.forEach(function(scene) {

var el = document.querySelector('#sceneList2 .scene[data-id="' + scene.data.id + '"]');

el.addEventListener('click', function() {

switchScene(scene);

});

If you have any questions, let me know,

greetings

Joost

Op donderdag 21 januari 2021 om 13:46:44 UTC+1 schreef Kris:

Rolf Birlenbach 2

unread,

Jan 21, 2021, 3:22:37 PM1/21/21

to Kris, marzipano

Hello Kris,

this is my photo and the real link is:

Villa Verano (flugfrosch.de)

What is your question for this it is only one layer but I think you can group the menu bar.

Best regards

Rolf

--
You received this message because you are subscribed to the Google Groups "marzipano" group.
To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/f5ad9bae-cde0-4424-a1ea-55e594e3681bn%40googlegroups.com.

Kris

unread,

Jan 22, 2021, 2:46:12 AM1/22/21

to marzipano

Hi Joost and Rolf.

Joost - thank you so much for that code, I can see that that would solve the problem somewhat and shall have a play around with your code.

If you don't mind me saying, ideally I would prefer if possible for the current marzipano scenelist user interface scene switcher to be adapted to give sub menus. This would keep all of my tours uniform in look as the client has used me before and the change may be a little jarring. I'm not sure this is possbiel though.

Easy navigation via the scenelist is important for me (and my clients) as hotspot navigation is not suitable for a large site with no obvious line of sight between scenes.

Ben from 360fusion has managed an excellent custom multi level implementation as shown at his college sample at site: https://www.360fusion.co.uk/portfolio/middlesbrough-college, but his coding skills are well above my understanding.

Rolf - As part of my need for a larger number of scenes that I usually provide, I'm researching means to adapt the Marzipano tool interface to make allowances for up to 40 or more different scenes. In doing this, I've noticed that the mobile view scenelist dark background does not extend beyond the view when scrolling down. My snapshot of your scenelist demonstrates this. Apologies for using your image without attribution, I forgot where I screenshot the mobile view error from.

Joost

unread,

Jan 22, 2021, 3:30:10 AM1/22/21

to Kris, marzipano

The link to the Middlesbrough-college has a nice menu-implementation! Also, Rolf has a nice way to solve the problem. Basically, the sky is the limit, you can create any look that you want :-)

If you don't mind me saying, ideally I would prefer if possible for the current marzipano scenelist user interface scene switcher to be adapted to give sub menus.

Since the project is kinda dead, I don't see any updates by the creators, I don't think a collapsible menu will ever be an extra standard-option in the future.

So to make this possible you have to post-process the downloaded Marzipano projects and (ask someone to) write an update(script) to be used on each project you download.

(Still wondering; how to make a script detect which levels/sub-levels there are. I think you allways need to manually edit things..)

Good luck!

Joost

Op vr 22 jan. 2021 om 08:46 schreef Kris <trailb...@gmail.com>:

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/56e7329b-8a89-4de9-8fe1-dc30fba11636n%40googlegroups.com.

Kris

unread,

Jan 22, 2021, 4:55:44 AM1/22/21

to marzipano

Yes, it's such a crying shame that such an excellent open source 360 degree viewing system is being left to wither on the vine.

I could write a list of the reasons why this Marzipano is so much better than the commercial offerings. I really don't mind editing the tool outputted code, as the majority of my projects have far less scenes than this forthcoming one, if only my coding skills were better.

Wondering if it is possible just to add extras to the scenelist code slightly such that we can have sub-dividing headers in the list, but which aren't 'clickable' and perhaps use hyphens to differentiate scenes under each heading (like below)? That might go some way to helping our users navigate a long list.

Especially if we can remove the mobile view overflow problem - perhaps with overflow-y: auto; rather than 100%?

-------------------------

<li class="text"> - Living Room View 1</li>

</a>

<li class="text"> - Living Room View 2</li>

</a>

<li class="text"> - Dining Room</li>

</a>

<li class="text"> - Kitchen</li>

</a>

<li class="text"> - Bedroom</li>

</a>

<li class="text"> - Bathroom</li>

</a>

</ul>

</div>

Kris

unread,

Jan 22, 2021, 5:33:46 AM1/22/21

to marzipano

The following code change seems to have rectified the grey background overflow problem on mobile viewing, i.e. changing from height: 100%; to height:auto;

.mobile #sceneList {

width: 100%;

height: auto;

left: -100%;

}

All I need now is to work out a heading / subheading system for the menu and I might be set.

Reply all

Reply to author

Forward