Frameworkless menu - Post ID 304694

User 3174986 Photo


Registered User
115 posts

Hello everyone!

I have a request for the advanced users of SD and the helpful members of this forum—no need to name you all, as you're already well-known here :)

Here’s my request: Could any of you create a guide on building a standard CSS menu using SD in frameworkless mode?

I carefully studied a video where a pleasant female voice explains how to create a menu, but it's done in Foundation. I need a frameworkless version.

I'm stuck at the stage of activating the hamburger menu icon. In the Foundation example, classes and toggle selectors were used. But how should this be done in frameworkless mode?

It’s a bit disappointing that frameworkless seems so neglected, despite its enormous potential.

The aforementioned Foundation video perfectly and thoroughly describes the menu creation process. If only there were a similar video for frameworkless!
User 2699991 Photo


Registered User
5,118 posts
Online Now

There is but you need to request log in to my step by step tutorials. Or there are ready made templates available from cc for frameworkless, and I believe Inger has some in here components website.
To make frameworkless web pages one needs a little bit more coding knowledge and experience than the other frameworks, many new users fall into it thinking it will be easier, but it isn't
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 2699991 Photo


Registered User
5,118 posts
Online Now

Sorry I couldn't remember the link to the frameworkless menu components before
here it is
https://components.coffeecup.com/multi-level-menus.html

you can download all of them for each framework or just the ones for framewortkless
They can be styled pretty easily to suit your design (colours animations etc.

You already know how to get to Ingers component page.
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 3174986 Photo


Registered User
115 posts

Its A Kind Of Bali Magic wrote:
There is but you need to request log in to my step by step tutorials. Or there are ready made templates available from cc for frameworkless, and I believe Inger has some in here components website.
To make frameworkless web pages one needs a little bit more coding knowledge and experience than the other frameworks, many new users fall into it thinking it will be easier, but it isn't


I am undoubtedly a beginner, but not in programming—in the Site Designer program. I want to master SD because it has enormous potential, allowing me to avoid writing code manually. Writing code itself doesn’t scare me; my knowledge of CSS and HTML is sufficient to create a website in a simple text editor or an HTML editor. But then, using SD would lose its purpose. That’s why I want to understand how to work with SD properly.

For example, I tried to create a responsive menu in framworkeless mode and used a checkbox to activate the icon. However, SD somehow inserts it into the label, and I cannot set the "for" "menu-toggle" attribute. It just doesn’t work.

Of course, I can add it manually through the *HTML Element* section, but I would like to learn all the capabilities of SD.
User 3174986 Photo


Registered User
115 posts

Its A Kind Of Bali Magic wrote:
Sorry I couldn't remember the link to the frameworkless menu components before
here it is
https://components.coffeecup.com/multi-level-menus.html

you can download all of them for each framework or just the ones for framewortkless
They can be styled pretty easily to suit your design (colours animations etc.

You already know how to get to Ingers component page.


Yes, thank you! I watched it.
User 2699991 Photo


Registered User
5,118 posts
Online Now

You watched what?


Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 379556 Photo


Registered User
1,567 posts

It's probably worth examining how the various Frameworkless menus at https://mock-up.coffeecup.com/barebone.html#nav were made.

Frank
User 2699991 Photo


Registered User
5,118 posts
Online Now

Frank Cook wrote:
It's probably worth examining how the various Frameworkless menus at https://mock-up.coffeecup.com/barebone.html#nav were made.

Frank

Yes and the ones at coffeecups components that I mentioned previously, amazing what one can learn from how the experts do it
Mastering The Understanding With Hands-On Learning
NEW TO "COFFEECUP SITE DESIGNER" FOUNDATION 6 FRAMEWORK?
STUCK ON SOMETHING?

LEARNING & UNDERSTANDING "THE HOW TO"? THE WHY'S & THE WHEREFORE'S?
WITH WAYAN'S STEP BY STEP TUTORIALS
Contact Me For One To One Assistance
https://mawarputih.coffeecup.com/forms/contact-wayan/

A simple quick way to contact me
https://rsd-tutorialscom.coffeecup.com/ … l-details/
User 3174986 Photo


Registered User
115 posts

Hooray!! I did it, and not just one, but three whole versions — pure CSS, CSS+JS, and pure JS (I know, a bit of overkill, but it was purely out of curiosity :) ).

The pure CSS version didn’t turn out exactly as I wanted; I had to tweak it in the *Element* sections. I struggled with the checkbox and discovered that the issue arises when you use a "pictures link" as an icon instead of the standard "pictures".

In the end, I settled on the CSS+JS version. It’s exactly what I wanted, and everything was done entirely within SD using SD tools. The menu can be fully edited, with as many submenu levels as you like, and so on.

I spent a whole week on this, but I achieved my goal!
Now, I’ll take a well-deserved couple of days off. After that, I’ll polish the visuals and animations and share it with you if anyone’s interested.
User 122279 Photo


Senior Advisor
14,563 posts

And will you let us have a look at this menu? :D
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com



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.