No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Horizontal menu, not drawer menu, what options do I have?

    Help
    2
    13
    1208
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • W
      wolfiton last edited by

      Thanks for the quick response @s-molinari

      1 Reply Last reply Reply Quote 0
      • W
        wolfiton last edited by wolfiton

        I will have to build this component for myself, so what would be the preferred way in a Vue component or directly in quasar as a component?(with slots)

        I am asking because I wanted to make it flexible and also share it with you(quasar comunity and team).

        1 Reply Last reply Reply Quote 0
        • W
          wolfiton last edited by wolfiton

          My component for the h menu, work in progress https://github.com/wolfiton/horizontal-menu

          Also please see this thread with the current problem for this custom component

          https://forum.quasar-framework.org/topic/5502/problem-understanding-why-the-transition-doesn-t-transfer-to-the-sloted-content

          1 Reply Last reply Reply Quote 0
          • W
            wolfiton last edited by

            To see it in action comment this code in MainLayout.vue

            <q-list
                        v-if="show"
                        dense
                        bordered
                        padding
                        class="rounded-borders h-nav"
                      >
                        <q-item clickable v-ripple>
                          <q-item-section>
                            Slotted
                          </q-item-section>
                        </q-item>
                      </q-list>
            
            1 Reply Last reply Reply Quote 0
            • W
              wolfiton last edited by

              Can I get some feedback on this menu animation?(opinions comments)

              Thanks

              1 Reply Last reply Reply Quote 0
              • s.molinari
                s.molinari last edited by

                Probably be better, if you put together a codepen or a sandbox. Then we can play with it.

                Scott

                W 1 Reply Last reply Reply Quote 0
                • W
                  wolfiton @s.molinari last edited by

                  @s-molinari

                  Thanks, I created a codesanbox here menu-animation

                  1 Reply Last reply Reply Quote 0
                  • s.molinari
                    s.molinari last edited by s.molinari

                    Actually, I saw someone use a Floating Action Button for the same sort of thing. They just had the menu buttons going out of the hamburger (and it was a different icon).

                    In general though, not bad.

                    Scott

                    1 Reply Last reply Reply Quote 0
                    • W
                      wolfiton last edited by

                      Really interesting because this animation was created by me from scratch. So apparently others used the same technique.

                      Thanks for the feedback.

                      1 Reply Last reply Reply Quote 0
                      • s.molinari
                        s.molinari last edited by

                        Actually, it was a hamburger icon. https://simple-ledger-app.netlify.com/#/

                        https://github.com/nkb-bd/quasar-ledger-app

                        Scott

                        1 Reply Last reply Reply Quote 0
                        • W
                          wolfiton last edited by

                          Thanks @s-molinari, for sharing the transition of the menu looks interesting.

                          1 Reply Last reply Reply Quote 0
                          • First post
                            Last post