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
    1153
    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.
    • s.molinari
      s.molinari last edited by

      Yeah. There is nothing like that in the Quasar repertoire. That would need to be something custom for sure. Would be a cool App Extension, if you do put it together as a component.

      Scott

      1 Reply Last reply Reply Quote 0
      • 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