create dropdown menu

[Feizal88]

Hi there, I can't create a menu dropbox because there is no view and tool menu appear in the silex editor. Hence cannot enable the apollo mode which is needed to make the dropbox functional.

Could u please guide me how to get the apollo mode in my screen.

[lexoyo]

Hello Some pages in the documentation have not been updated. There is no menu anymore and no apollo mode either Please tell me what you want to do and i can guide you step by step Then if you want you can update the documentation

[singchan]

Can I close this issue? @Feizal88

[Feizal88]

Below is the HTML coding, how to make this coding work with HTML Box properly. Currently, its half way function which upon click the Tutorial button, the multilevel dropdown does not work or not display at all.

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
    .dropdown-submenu {
        position: relative;

    }

    .dropdown-submenu .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -1px;
    }
</style>

<div class="container">
    <h2>Multi-Level Dropdowns</h2>
    <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
    <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
            <span class="caret"></span></button>
        <ul class="dropdown-menu">
            <li><a tabindex="-1" href="#">HTML</a></li>
            <li><a tabindex="-1" href="#">CSS</a></li>
            <li class="dropdown-submenu">
                <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                    <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                    <li class="dropdown-submenu">
                        <a class="test" href="#">Another dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">3rd level dropdown</a></li>
                            <li><a href="#">3rd level dropdown</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>

<script>
    $(document).ready(function(){
      $('.dropdown-submenu a.test').on("click", function(e){
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
      });
    });
</script>

[singchan]

You need to remove the <meta tag and the otherwise it should work as is jquery script which is already in silex sites (<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>)

then add this at the end of you html in order to make the html box high enough to show the menu

<br><br><br><br><br><br><br><br><br><br>

[singchan]

tell me if need js code to open a page when the user clicks on an item

[Feizal88]

And why now there is dropdown list appear. The problem is still there.

I think some coding should put at HTML Box and some at CSS Editor. Could u please assists this.

[singchan]

And why now there is dropdown list appear. The problem is still there.

i do not understand, can you provide more info or a screenshot? what is the problem?

I think some coding should put at HTML Box and some at CSS Editor. Could u please assists this.

you can put everything in the HTML box in your case

[Feizal88]

[image: Inline image 1]

Once click tutorial, the multi dropdown still does not work.

Below is the coding that put inside the HTML Box.

        <link rel="stylesheet" href="

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

        <div class="container">
            <h2>Multi-Level Dropdowns</h2>
            <p>In this example, we have created a .dropdown-submenu

class for multi-level dropdowns (see style section above).

Note that we have added jQuery to open the multi-level dropdown on click (see script section below).

            <div class="dropdown">
                <button class="btn btn-default dropdown-toggle"

type="button" data-toggle="dropdown">Tutorials

• HTML
• CSS
• New dropdown
  • 2nd level dropdown
  • 2nd level dropdown
  • Another dropdown
    • 3rd level dropdown
    • 3rd level dropdown

            </div>
        </div>

        <script>
            $(document).ready(function(){
              $('.dropdown-submenu a.test').on("click", function(e){
                $(this).next('ul').toggle();
                e.stopPropagation();
                e.preventDefault();
              });
            });
        </script>

[singchan]

1- the image is not visible on github 2- in the code you still have jquery included, remove the tag <script src=" https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

[singchan]

3- you did not add the <br> as I advised

[singchan]

should I close this issue? did you manage to do what you wanted?

[Feizal88]

ok. Closed

On Mon, Mar 13, 2017 at 11:50 PM, singchan notifications@github.com wrote:

[image: Boxbe] https://www.boxbe.com/overview singchan ( notifications@github.com) is not on your Guest List https://www.boxbe.com/approved-list?tc_serial=29299928692&tc_rand=200874309&utm_source=stf&utm_medium=email&utm_campaign=ANNO_MWTP&utm_content=001&key=iJs0UbJmumQmOxd21wT6eMq1KlkLmQwJ4eNWynAgwdI%3D&token=dQgyLKLXZ0BCAV9MVogAKZXtEjwHM7mZdRNL6nuMiehwWqZQwh7DkK8F8itWyGxo | Approve sender https://www.boxbe.com/anno?tc_serial=29299928692&tc_rand=200874309&utm_source=stf&utm_medium=email&utm_campaign=ANNO_MWTP&utm_content=001&key=iJs0UbJmumQmOxd21wT6eMq1KlkLmQwJ4eNWynAgwdI%3D&token=dQgyLKLXZ0BCAV9MVogAKZXtEjwHM7mZdRNL6nuMiehwWqZQwh7DkK8F8itWyGxo | Approve domain https://www.boxbe.com/anno?tc_serial=29299928692&tc_rand=200874309&utm_source=stf&utm_medium=email&utm_campaign=ANNO_MWTP&utm_content=001&dom&key=iJs0UbJmumQmOxd21wT6eMq1KlkLmQwJ4eNWynAgwdI%3D&token=dQgyLKLXZ0BCAV9MVogAKZXtEjwHM7mZdRNL6nuMiehwWqZQwh7DkK8F8itWyGxo

Closed #557 https://github.com/silexlabs/Silex/issues/557.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/silexlabs/Silex/issues/557#event-997482788, or mute the thread https://github.com/notifications/unsubscribe-auth/AHWukubOBE-RWq2-UVX78PoPKdVLqeYRks5rlWXhgaJpZM4MMUej .

--

Feizal Mazlan

Retrenchment Program - Register for Training (Reskilling / Upskilling) Courses at this link below Form Link Address http://www.emailmeform.com/builder/form/bEKddO0NbrB

ONLINE Commissioning Training http://www.commissioningcoach.com/online-commissioning-training-nm-10percent-off/ http://www.commissioningcoach.com/online-commissioning-training-nm-10percent-off/

LIVE Commissioning Training Dubai http://www.commissioningcoach.com/live-commissioning-training-nm-5percent-off/ http://www.commissioningcoach.com/live-commissioning-training-nm-5percent-off/

Do you want to be EEHA Inspector? Electrical Equipment for Hazardous Area (EEHA) Training Dates http://www.eehacourses.com/#%21training-calendar/c380

Sustainability & Green CompetencyApplication form for Project of the Year Award http://media.wix.com/ugd/09e821_0bd17df8d99b42cd87e936aa78b05f70.pdf Application form for Fundamentals Award http://media.wix.com/ugd/09e821_3a454ae5a29a416d982d0ec0edc3089c.pdf Application form for Sustainability Award http://media.wix.com/ugd/09e821_c7deb28201e84e5c99934bc6e69117d6.pdf

TEL: +603-6280 4984 l FAX: +603-6280 4960 l H/P: 013-3881412 Email: fezal.thinkpus@gmail.com fezal.thinkpus@gmail.com WEB: www.thinkplusmanpower.com l WEB: www.thinkpluscareer.com l WEB: www.thinkplusglobalgroup.com http://www.thinkplusglobalgroup.com/ l WEB: www.thinkpluscabin.com http://www.thinkpluscareer.com/ l

Check out on our Popular and Monthly Training Modules WEB: www.thinkplustraining.com l WEB: www.thinkplus-academy.com l WEB: www.thinkplusacademy.com http://www.thinkplusacademy.com/ l WEB: www.thinkplus-sap.com