Uploaded image for project: 'Camel'
  1. Camel
  2. CAMEL-15238

Alternative & Minimal Navbar Menu Design For Desktop

Details

    • Improvement
    • Status: Closed
    • Major
    • Resolution: Not A Problem
    • None
    • None
    • website
    • Moderate

    Description

      The current dropdown menu is simple of course however, In my opinion, it can be made much more minimal, and much simpler CSS could be applied to beautify it.

      1. The on-hover color change of the navbar items should be changed. Reasons can create a dizzy feeling on the continuous color change of text & also this method is rarely applied on any website. 

      An alternative approach to it - Just apply a border-bottom approach when hovering over navbar menu items. Also when hovered around the ones with a dropdown menu, rotate it by 135 deg with the transition. Many websites including Github, Myntra, etc use this technique.

       

      2. For the ones with the dropdown menu on hover over navbar items, it has really less width and when you navigate through the dropdown items, you observe that there is a gray background color. Personally, I don't think it suits the design.

       

      An alternative approach to it - Increase the width and while hovering over the dropdown menu items, just increase its font-weight to provide the effect.

       

      This is the preview of how the design would be.

       

       

       

      Attachments

        1. dropdown-design.png
          12 kB
          Aemie
        2. dropdown-design-4.png
          38 kB
          Aemie
        3. dropdown-design-1.png
          38 kB
          Aemie
        4. dropdown-design-2.png
          38 kB
          Aemie
        5. dropdown-design-3.png
          37 kB
          Aemie

        Activity

          Aemie Aemie added a comment -

          zregvart  delawen what are your opinions on this? 

          Aemie Aemie added a comment - zregvart   delawen what are your opinions on this? 

          I like the simplicity, I agree. Your snapshot looks great.

          Just make sure long menu lines don't break on hover (because they get too big and don't fit). On the example I see there's plenty of space, but I am not sure about the rest of the menus.

          delawen Maria Arias de Reyna Dominguez added a comment - I like the simplicity, I agree. Your snapshot looks great. Just make sure long menu lines don't break on hover (because they get too big and don't fit). On the example I see there's plenty of space, but I am not sure about the rest of the menus.
          zregvart Zoran Regvart added a comment -

          Not sure about switching the font weight on hover (User stories in the screenshot are bold other items are not), this could easily lead to reflow and look glitchy. I'm not a big fan of the current colour change on-hover either, I think if it was more subtle it would work better (like on github.com or miro.io). I'd like to move away from menu dropdowns if at all possible, it's odd that some menus now have them and some don't. I like the border bottom effect though, the same can perhaps be made with the default link decoration (underline). I'm unsure about animating the arrow indicating the dropdown menu, that might look a bit too gimmicky.

          zregvart Zoran Regvart added a comment - Not sure about switching the font weight on hover (User stories in the screenshot are bold other items are not), this could easily lead to reflow and look glitchy. I'm not a big fan of the current colour change on-hover either, I think if it was more subtle it would work better (like on github.com or miro.io). I'd like to move away from menu dropdowns if at all possible, it's odd that some menus now have them and some don't. I like the border bottom effect though, the same can perhaps be made with the default link decoration (underline). I'm unsure about animating the arrow indicating the dropdown menu, that might look a bit too gimmicky.
          Aemie Aemie added a comment -

          zregvart in my opinion the current dropdowns are required honestly. Continuous navigation for those 2 dropdowns seems not like a good idea. Dropdowns are easy for the user to navigate. Also, I was looking through designs & I landed across one that caught my attention. I am putting the link here, https://www.mockplus.com/?home=1 

           

          The reason I like this dropdown is it looks highly interactive and also if we are going to use the mock design for the navbar within the mobile screen, this design can seem consistent with it. So instead of color change on hover, we could use border-bottom and as there will be enough space (if we use the design style as shown in the link), we could include the icons as well on hover just use a text-underline or border-bottom. This manner will look neat, consistent and interactive in my opinion.

           

          Aemie Aemie added a comment - zregvart  in my opinion the current dropdowns are required honestly. Continuous navigation for those 2 dropdowns seems not like a good idea. Dropdowns are easy for the user to navigate. Also, I was looking through designs & I landed across one that caught my attention. I am putting the link here,  https://www.mockplus.com/?home=1    The reason I like this dropdown is it looks highly interactive and also if we are going to use the mock design for the navbar within the mobile screen, this design can seem consistent with it. So instead of color change on hover, we could use border-bottom and as there will be enough space (if we use the design style as shown in the link), we could include the icons as well on hover just use a text-underline or border-bottom. This manner will look neat, consistent and interactive in my opinion.  
          zregvart Zoran Regvart added a comment -

          Aemie oh, very nice, I very much like the full width menus, this can work well with icons we discussed in CAMEL-15140

          zregvart Zoran Regvart added a comment - Aemie oh, very nice, I very much like the full width menus, this can work well with icons we discussed in CAMEL-15140
          Aemie Aemie added a comment - - edited

          zregvart delawen  I added a rough layout on the design (dropdown-design-x). Here, contributing is the one hovered on. The icons used in this are just temporary as I just wanted to create a layout before implementation. I am uncertain about the combination of the colors to suit in the dropdown ( I currently like the dropdown-design-4 ). However, would love to get your opinions on it.

          Aemie Aemie added a comment - - edited zregvart delawen  I added a rough layout on the design (dropdown-design-x). Here, contributing is the one hovered on. The icons used in this are just temporary as I just wanted to create a layout before implementation. I am uncertain about the combination of the colors to suit in the dropdown ( I currently like the dropdown-design-4 ). However, would love to get your opinions on it.

          People

            Unassigned Unassigned
            Aemie Aemie
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: