Giter Club home page Giter Club logo

Comments (5)

tonyfettes avatar tonyfettes commented on June 12, 2024

Can I know how you mock up the menu? It looks pretty, and I want to use it for displaying the evluation options (in haz3lweb/view/dhcode/Settings.re). Thank you in advance!

from hazel.

disconcision avatar disconcision commented on June 12, 2024

@tonyfettes i used photoshop, which i can do very fast, but unfortunately does not help accelerate the process of actually implementing it. however if someone is interested in implementing the functionality of such a submenu though, disregarding appearance, i'm happy to do the css, as it i can do it very quickly if all divs are tagged with reasonable class names

from hazel.

tonyfettes avatar tonyfettes commented on June 12, 2024

@disconcision I tried, but for now the best I got is something looks like this:
image

I don't know how to place the box on the right side of the toolbar, other than hardcode the distance... Currentlly I put the list and the icon under a div called submenu. Is this ideal?

from hazel.

disconcision avatar disconcision commented on June 12, 2024

right now the icons are just 'loose' in the top-level menu. it looks like you're absolutely positioning the submenu with respect to the icon, which means you won't be able to get it to align to the side of the menu itself.

so id suggest adding square container divs inside the top-level menu div which fill the full width of the menu. the icons divs can be centered inside the squares, and the submenu divs can be inside the containers, but absolutely positioned so as to align with the top and right of the squares and hence the side of the menu. the height of submenu items should be the same as the height/width of the squares

from hazel.

disconcision avatar disconcision commented on June 12, 2024

yeah err regardless actually you may have to hardcode the distance unless you add some more divs... i think its fine to hardcode here

from hazel.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.