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?