Create Navigation in RSD - Page 2

User 2699991 Photo


Registered User
1,671 posts
Online Now

Byron Tipping wrote:
Wayan - you have an example?


Byron
An example is now available as a component to download from my site

from the landing page, select the button "Download Center there you will fing the component to download either as RSD or Rff Component.

By the way there is one meny in the components under navigation already with dropdown,, all one needs to do is restyle it to how you want it to show (but if you do that, then first you must add the menu as a component the usual way,, then once you have placed it wherever you want it to go,, REMOVE the component from the component section BEFORE you do any re-styling,, otherwise the component will retain the re-styled stuff.
The Sky Is A big Empty Space : But There Is No Room For Error
website https://rsdtutorials.com
User 244626 Photo


Registered User
533 posts
Online Now

Most menus are created using nested UL Links and that is just not possible in this software. Even Foundation Zurbs menu examples use nested UL Links. The only fix I know is to create the UL Link Element group and then copy or "append" to the UL link list item you want it to be nested from using a jquery fix. I applied this to Stellarnav.js which is a simple multi level menu.

http://gluexp.coffeecup.com/stellarnav.html

https://github.com/vinnymoreira/stellarnav

I did not get into styling at all but just concentrated on the working aspect of the menu. I have not been able to transfer this technique to Foundations menus such as the accordion though...
Attachments:
User 2823310 Photo


Registered User
312 posts

You can add nested ULs Twinstream but it's crazy difficult. You kind of have to follow it by using preview and looking at the source code.
Try this.
Open a blank and from Elements at the bottom left under "layout" drag list container into a column.
Drag a text link into those 3, name the top 1 linked text, next one 2 linked text the last 3 linked text.
Select the 2 linked text list item container and drag another list container onto that.
Name those 2a linked text, 2b and 2c.
Now Preview On in your browser and look at source, you'll have

<div class="row">
<div class="columns small-12">
<ul class="list-container">
<li class="list-item-container">
<a class="link-text" href="#">1 Linked Text</a>
</li>
<li class="list-item-container">
<a class="link-text" href="#">2 Linked Text</a>
<ul class="list-container">
<li class="list-item-container">
<a class="link-text" href="#">2a</a>
</li>
<li class="list-item-container">
<a class="link-text" href="#">2b</a>
</li>
<li class="list-item-container">
<a class="link-text" href="#">2c</a>
</li>
</ul>
</li>
<li class="list-item-container">
<a class="link-text" href="#">3 Linked Text</a>
</li>
</ul>
</div>
</div>


Go here:
http://foundation.zurb.com/sites/docs/d … -menu.html

Now from the inspector select the top List Container, double click it to get to design.
From the foundation classes add dropdown and menu to classes.
Select attributes and from that list add data-dropdown-menu
Now back to inspector and select the second List Container, double click it to get to design.
Click classes and add menu it'll be in your list now.

Preview On and you'll have a drop down menu to work with.
If you view source from the browser it makes this a little easier.

At least that should get you started... it gets to be no fun when you get to adding the top bar and values to the attributes, like "medium-dropdown" since they get hidden. That and figuring out how to fight the built in styles on some of the stuff. Like adding the simple class lets you style the subs more in RSD but you'll find out.
User 244626 Photo


Registered User
533 posts
Online Now

Yes, thanks for that. I must have done it incorrectly earlier when I was testing different submenus. I was also going for the 3a, 3b, and 3c level also as they show in the accordion so I think I can apply what I just learned to achieve a Foundation 6 menu using the accordion. To get to the next (3rd) level I just added a UL link because the List Container refused to be added again ?

Here is the updated RSD file with just using elements as you described.

http://gluexp.coffeecup.com/stellarnav2.html

(and my apologies to those coffee people):cool:



Attachments:
User 2823310 Photo


Registered User
312 posts

The accordion menu is actually easier than the responsive drop down.

To get a third or fourth list container level nested in there for a drill down menu just make sure you have "list item container" selected on the page from the drop down dialogue and not the text link when you drag them onto it. It does get a little hairy the farther you get into it.

I'm personally not too much of a fan of pre-styled libraries I like ones like jQuery though that make the languages easier to work with, so I'm glad they left grinder.
User 244626 Photo


Registered User
533 posts
Online Now

I am not able to get a third or fourth list container level using only the list container element. Could you provide a sample project showing that only ?
User 2823310 Photo


Registered User
312 posts

My old PC died during mid transfer to this new one last Thursday, and I was working in grinder (didn't get the last couple of weeks of backups moved - UGH!). The reason I mention that is because that means I've only had a couple of days to look at this RSD with the foundation build. I'm new to the foundation library too since I've always hand coded until I moved to RSD beta so I haven't had the chance to get too in depth.
But I think I know what you're going for?

Anyway, what I found so far to answer your question is the trick there for sub-sub nested ULs is to drag in a UL list.
For example in this one I did this morning.
top bar drop menu to accordion from a title bar toggle
That is a drop down menu on wide screens, and on medium & under it's a icon linked toggle to an accordion style it's just a basic layout with no styles added using the foundation 6 defaults.
So for the 1a-a sub in it you select the list item container and drag in a UL link list.
Don't forget to check the attribute values when you're having a look through it.
Here is the zip for you to play with:
menu-drop-accordion ZIP
User 244626 Photo


Registered User
533 posts
Online Now

Yes. That example you provided is exactly where I am headed. I like the dropdown accordion mobile version better than the mobile sliding horizontal left to right drilldown.

I downloaded your project example however in comes up with the error "Invalid Project File" ?

I am using RSD 2.
User 244626 Photo


Registered User
533 posts
Online Now

I was able to open the file on another computer that has a more up to date version of RSD 2.0. Thanks, the structure looks great !
User 2823310 Photo


Registered User
312 posts

Well here it is unzipped see if that works for you?
menu-drop-accordion RSD

I'm using RSD 2 in windows

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.