Drop Menu in Silex

[outermostcbro]

Hello I am having issues following the guide for #247 . I am using the web editor silex from Silex.me (https://editor.silex.me/) and the guide seems very outdated and some of the functions on there do not appear in Silex Web? Could this be added into the main editor itself? Many other web builders already do this included and was wondering why its not the same here?

[lexoyo]

Hello
This is Silex v2
Can you start over with Silex v3?
It will be much better for your project

[outermostcbro]

Hello This is Silex v2 Can you start over with Silex v3? It will be much better for your project

Hello!
I would love to use V3 but it does not have templates available atm and ive already gotten halfway through on V2; and there are features in V2 that are not in V3 yet.

[outermostcbro]

If there was a way on V3 too import a site as an option like in v2 or start with template.

[lexoyo]

Unfortunately no, there is no way to import v2 to v3

V2 was active for 10+ years and it had flaws that can not evolved, I needed to break it

For your problem of drop down, I can suggest that you use HTML in an HTML box maybe?

[lexoyo]

To generate the HTML maybe try this
https://www.cssportal.com/css3-menu-generator/

(or similar, I just did a search)

[AmmarAlgan]

Dear Alex
I´ve introduced Silex by a good friend since Wordpress didn´t worked out for me.
Now i struggle with the drop down menu to add on the excisting Navbar. I followed your instructions in the video "silex v3 launch" but seems that this part is missing :)

Is there any other description or tutorial which explains it for a newbee like me :))
Thanks a lot for your effort and work!

[outermostcbro]

Hello,
I have coded a drop menu in Silex V2 that should work also in V3. All you need to do is add a HTML section and paste the code and then you can tweak it in the code to make it look like you want it. I tried to even make the code simple.

Drop Menu w Categories.txt
Drop Menu.txt

[outermostcbro]

Drop menu with categories

[outermostcbro]

<title>Dropdown Menu with Categories</title> <style> /* Main dropdown container */ .dropdown { position: relative; display: inline-block; }

    /* Dropdown button */
    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    /* Dropdown content (hidden by default) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 200px;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    /* Each category inside the dropdown */
    .dropdown-content .category {
        position: relative;
    }

    /* Category items */
    .dropdown-content .category a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* Dropdown submenu for each category (hidden by default) */
    .dropdown-content .submenu {
        display: none;
        position: absolute;
        left: 100%;
        top: 0;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    }

    /* Show submenu on hover */
    .category:hover .submenu {
        display: block;
    }

    /* Show main dropdown on hover */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* Change background color of dropdown items on hover */
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

    /* Change button color on hover */
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
</style>

<div class="dropdown">
    <button class="dropbtn">Dropdown Menu</button>
    <div class="dropdown-content">

        <!-- Category 1 -->
        <div class="category">
            <a href="#">Category 1</a>
            <div class="submenu">
                <a href="#item1">Item 1.1</a>
                <a href="#item2">Item 1.2</a>
                <a href="#item3">Item 1.3</a>
            </div>
        </div>

        <!-- Category 2 -->
        <div class="category">
            <a href="#">Category 2</a>
            <div class="submenu">
                <a href="#item4">Item 2.1</a>
                <a href="#item5">Item 2.2</a>
                <a href="#item6">Item 2.3</a>
            </div>
        </div>

        <!-- Category 3 -->
        <div class="category">
            <a href="#">Category 3</a>
            <div class="submenu">
                <a href="#item7">Item 3.1</a>
                <a href="#item8">Item 3.2</a>
                <a href="#item9">Item 3.3</a>
            </div>
        </div>

    </div>
</div>

[outermostcbro]

Drop Menu

[outermostcbro]

<title>Dropdown Menu for Silex</title> <style> /* Main menu container */ .dropdown { position: relative; display: inline-block; }

    /* Dropdown button */
    .dropbtn {
        background-color: #4CAF50;
        color: white;
        padding: 14px 20px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }

    /* Dropdown content (hidden by default) */
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    /* Dropdown items */
    .dropdown-content a {
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
    }

    /* Change color on hover */
    .dropdown-content a:hover {
        background-color: #f1f1f1;
    }

    /* Show the dropdown menu when hovering over the button */
    .dropdown:hover .dropdown-content {
        display: block;
    }

    /* Change button color on hover */
    .dropdown:hover .dropbtn {
        background-color: #3e8e41;
    }
</style>

<div class="dropdown">
    <button class="dropbtn">Dropdown Menu</button>
    <div class="dropdown-content">
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
        <a href="#link3">Link 3</a>
    </div>
</div>

[outermostcbro]

Hope this helps.

[AmmarAlgan]

Thank you so much. Yes it worked!

[outermostcbro]

Glad it helped.

[AmmarAlgan]

Well, i still have difficulties to adapted the navbar to the different modes (tablet, mobile landscape etc.)

Can i use one css script which is value for all those modes?

[outermostcbro]

Well, i still have difficulties to adapted the navbar to the different modes (tablet, mobile landscape etc.)

Can i use one css script which is value for all those modes?

You should be able too and yes.

[AmmarAlgan]

And how this code could look like?

[lexoyo]

Hello
I'm not sure i can help but I'd be happy to
You want to create css code with media queries to style a dropdown ?

[AmmarAlgan]

Yes like that:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Can i just use this one?

[lexoyo]

Sure why not

…

On 5 January 2025 20:26:51 GMT+07:00, Ammaro ***@***.***> wrote: Yes like that: https://www.w3schools.com/css/css_rwd_mediaqueries.asp Can i just use this one? -- Reply to this email directly or view it on GitHub: #1615 (comment) You are receiving this because you commented. Message ID: ***@***.***>

[lexoyo]

Hi guys
If you need help let me know
We could do a live stream to help you out
Or just an online meeting
If you have ideas on how to make it the most useful to everyone possible let me know

[outermostcbro]

And how this code could look like?

[outermostcbro]

Sometimes you have to change the font size in the code to make it bigger for mobile supports.

[AmmarAlgan]

Hi guys If you need help let me know We could do a live stream to help you out Or just an online meeting If you have ideas on how to make it the most useful to everyone possible let me know

I would appreciate if we have a live stream. Thanks!

[AmmarAlgan]

Online Meeting would also work. Dont know what is the best to share also screen if needed.

[lexoyo]

ok
are you in too @outermostcbro ?

[outermostcbro]

In what?

[lexoyo]

I mean do you want want to participate to the online meeting about this issue?

[outermostcbro]

Oh!, im good thank you though, Work is preventing me from anything right now, thats why my msgs are delayed. I already fixed the issue and presented some source code in HTML5 that yall could use and add if you want.

[lexoyo]

So in the end most of the problems come from the navbar component @AmmarAlgan right? It has styles that can not be overriden easily in silex. I think I will remove it from Silex (it will not break the site that use it btw)

Also another take from this is : adding custom code is dangerous if you don't know code 😅

There are many ways to do a menu bar, maybe i should do a few of them as components

The blocks I imagine:

• a responsive nav bar - with a hamburger menu on mobile
• nav bar items: display a submenu on hover or on click (2 different blocks)

[lexoyo]

let me know what you think and i'll create a feature request

sorry that it's such a pain to do a simple nav bar

[AmmarAlgan]

So in the end most of the problems come from the navbar component @AmmarAlgan right? It has styles that can not be overriden easily in silex. I think I will remove it from Silex (it will not break the site that use it btw)

Also another take from this is : adding custom code is dangerous if you don't know code 😅

There are many ways to do a menu bar, maybe i should do a few of them as components

The blocks I imagine:

• a responsive nav bar - with a hamburger menu on mobile
• nav bar items: display a submenu on hover or on click (2 different blocks)

Yes! the styles which are used in silex had a conflict with those in the code area i guess. It´s quite difficult to understand which codes are automatically set in the background of silex while using html coding. i have to take much more time for learning the proper codes before designing randomly by using the right panel properties.

Thanks for your help! I´ll let you know if i make any big progress 8-)