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.
    • 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