Drop Menu in Vanilla - Page 2

User 486215 Photo


Registered User
79 posts

So I contacted Bob, sent him my file, and the reply was, that the Vanilla framework that Brian posted a lin to, was not THEIR Vanilla.

Wow, I never thought of that. I thought that it was just that parts of the Vanilla Framework were missing or still under construction!

I guess I should have had a clue when there were NO Vanilla framework classes or any other specifics shown in the SD styling panels.

Maybe there is some advantage in CoffeeCup's Vanilla offering. This way one can add their own framework to a project by including ALL the core CSS and JS for that framework. This could be done in a similar way to what I had to do in the navbar example above.

I suppose "Vanilla" was/is just a bad choice of words for the available SD themes.

And, apparently there are more available frameworks than Foundation, Bootstrap, Materialize and Vanilla (Framework).

Here's a link to a much longer list of frameworks than the four above:
https://colorlib.com/wp/free-css3-frameworks/

Notice that the Vanilla Framework was not even mentioned in this list!
User 244626 Photo


Registered User
811 posts

Webmaster wrote:
So I contacted Bob, sent him my file, and the reply was, that the Vanilla framework that Brian posted a lin to, was not THEIR Vanilla.

Wow, I never thought of that. I thought that it was just that parts of the Vanilla Framework were missing or still under construction!

I guess I should have had a clue when there were NO Vanilla framework classes or any other specifics shown in the SD styling panels.

Maybe there is some advantage in CoffeeCup's Vanilla offering. This way one can add their own framework to a project by including ALL the core CSS and JS for that framework. This could be done in a similar way to what I had to do in the navbar example above.

I suppose "Vanilla" was/is just a bad choice of words for the available SD themes.

And, apparently there are more available frameworks than Foundation, Bootstrap, Materialize and Vanilla (Framework).

Here's a link to a much longer list of frameworks than the four above:
https://colorlib.com/wp/free-css3-frameworks/

Notice that the Vanilla Framework was not even mentioned in this list!


I am not sure that is going to be much use to link the frameworks css and js in the header and footer. Its not going to show up in the SD3 design pane till you preview the project.
Bootstrap 5 CSS Grid.
User 122279 Photo


Senior Advisor
14,447 posts
Online Now

My guess is, that we can do what we used to do once; use our own class names and make our own CSS file. A bit like going back to the HTML Editor, except that we'll get the built-in wireframe for the responsivety.
Ha en riktig god dag!
Inger, Norway

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


User 122279 Photo


Senior Advisor
14,447 posts
Online Now

Twinstream wrote:
Here is a Vanilla Top Down Responsive SD3 Menu.


I've studied that menu of yours and found it very interesting. Looks like you did what I assumed in my previous post: created your own classes and style, and used a fair amount of flex styling. I have to try that some time.
Ha en riktig god dag!
Inger, Norway

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


User 244626 Photo


Registered User
811 posts

Inger wrote:
Twinstream wrote:
Here is a Vanilla Top Down Responsive SD3 Menu.


I've studied that menu of yours and found it very interesting. Looks like you did what I assumed in my previous post: created your own classes and style, and used a fair amount of flex styling. I have to try that some time.


This newer version does not use any flex or grid which is what I first wanted so I can provide a fallback redirect to another page in my project that will be for older browsers only. It actually is easily customizable as you can see this menu slides in from the left just by changing a few settings. If one edits the small jquery file from hover to click you can make the dropdown clickable. I am still working at adding in up and down arrows for that as well as the final animations.

I modified the structure of the sub menu to use a list container instead of a regular ul. It does appear one could could further with sub sub menus but I would never need that.
Bootstrap 5 CSS Grid.
User 486215 Photo


Registered User
79 posts

I am not sure that is going to be much use to link the frameworks css and js in the header and footer. Its not going to show up in the SD3 design pane till you preview the project.

If I understand what you are saying, you're right.

I had to export the project and then copy the referenced CSS and JS files into the export folder. Then I could test the generated HTML (the index.html file) with some browser. This is why I included the exported files in my .zip.

A bit of a nuisance, but that's the price you pay for a framework not being built in to SD. You have to do the same thing for some third-party web software added to a CoffeeCup project file - whether FF, BB, RSD, or SD.

I didn't have to generate the project to Preview it in the Materialize Navbar example illustrated in another thread on this Forum, since Materialize IS built in to SD.
User 2839984 Photo


Registered User
52 posts

Hi Twinstream!

I have opened up your menu and I like it a lot. As I am not a coder, I do have one question. How do I edit the items in the drop menus? I can edit the menu itself, but as I can't see the drop downs themselves unless I preview, how do I edit them?

Thanks!
Just another day designing websites for money... it's all good!
User 244626 Photo


Registered User
811 posts

In the element tree there is a box that says "Hide 3 items at this breakpoint". Click to uncheck.
Bootstrap 5 CSS Grid.
User 2839984 Photo


Registered User
52 posts

Thanks! I should have thought of that as I use it all the time to show items I have hidden in smaller breakpoints. Didn't cross my mind.

Thanks, again!
Just another day designing websites for money... it's all good!
User 2601283 Photo


Registered User
219 posts

How can I set something to be hidden at a break point.? At my smallest, there are 108 items hissed, but after that breakpoint it drops to 98.

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.