How can you "hide" something with CSS?

ByJeremy Edberg

I created a context menu that also has submenus:

https://jsbin.com/vaxayibeme/1/edit?html,css,output

For user-friendliness, the submenus should be shown and hidden with a fade animation, so that if you have been out of it for a few milliseconds, you can go back in with the mouse to keep it open.

When you are in this area with the mouse:

However, the two submenus Above / Below open immediately. This is especially problematic on a mobile phone, because you only navigate with clicks. It's easy to accidentally insert something when you just wanted to close the menu (or change the type and potentially delete data).

I've hidden the inactive entries with opacity: 0 (because you can animate them with transition to create that fade effect). However, this has the disadvantage that they're only "invisible" but still clickable.

Before, I had hidden it with display: none so that it was really gone, but you can't animate it, which makes it less user-friendly.

Does anyone have an idea how to hide the submenus using CSS? (It doesn't necessarily have to be a fade effect, just a way to prevent them from being opened accidentally, so you can hover your mouse over the area shown in image 2 without it opening).

I'll add code for everyone who doesn't want to go to JS Bin (otherwise it would be too long).

(1 votes)
Loading...

Similar Posts

Visualize binary tree on website (HTML, CSS, JS)?

ByGuteFrageXY13

Hello, for my software development class, I have to program a binary tree using JavaScript and then visualize it using HTML and CSS. The teacher explicitly stated that AI or other assistance should be used, as otherwise the task would be too extensive. Well, I asked ChatGPT 4o to visualize it, and all I got…

What other Java tricks are there?

ByMar3ike

I learned some time ago that I can open a connection in a try-with-resources and I don't need a finally to take care of closing it. something like this: try(Connection c = DriverManager.getConnection(url, benutzer, passwort)){ //irgendwas mit der connection machen } catch(Exception e){ //handling } ; I think it's really cool and wanted to ask…

Subscribe
Notify of
1 Answer
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
guterfrager5
guterfrager5
1 year ago

HTML:




  
  
  JS Bin


  

    

        
Einfügen

        

            

                
Darüber

                

                    
String

                    
Number

                    
Boolean

                    
Array

                    
Object

                    
Null

                

            

            

                
Darunter

                

                    
String

                    
Number

                    
Boolean

                    
Array

                    
Object

                    
Null

                

            

        

    

    

        
Verschieben

        

            
Nach oben

            
Zeile hoch

            
Zeile runter

            
Nach unten

        

    

    
Löschen

    

        
Typ ändern

        

            
String

            
Number

            
Boolean

            
Array

            
Object

            
Null

        

    

    
Aufklappen

    
Zuklappen

    
Alle aufklappen

    
Alle zuklappen

 

CSS:

body
{
   background: #222;
   color: #DDD;
   border-color: #AAA;
   font-family: Arial;
}

.ctxmenu
{
   position: fixed;
   z-index: 999;
   background: inherit;
   top: 200px;
   left: 300px;
}

.ctxmenu *
{
   background: inherit;
   position: relative;
}

.ctxmenu > *, .entries > *
{
   padding: 5px 10px;
   white-space: nowrap;
   cursor: default;
}

.ctxmenu .entry
{
   transition: all linear 200ms;
}

/* Fallback für Firefox < 121 */
.ctxmenu .entry:hover
{
   background: #111;
   transition: all linear 200ms;
}

.ctxmenu .entry:hover, .ctxmenu .submenu > :first-child:has(+ :hover)
{
   background: #111;
   transition: all linear 200ms;
}

.ctxmenu .submenu
{
   padding: 0;
}

.ctxmenu .submenu:hover
{
   z-index: 100;
}

.ctxmenu .submenu > :not(.entries)
{
   padding: 5px 10px;
}

.ctxmenu .submenu > .entries
{
   position: absolute;
   top: 0;
   right: 0;
   translate: 0%;
   opacity: 0;
   transition: all linear 300ms;
   /*display: none;*/
}

.ctxmenu .submenu:hover > .entries
{
   translate: 100%;
   opacity: 1;
   transition: all linear 300ms;
}

.ctxmenu .submenu.right > .entry.label::after,
.ctxmenu .submenu:not(.left) .entry.label::after
{
   content: ">";
   float: right;
   padding-left: 10px;
}

.ctxmenu .submenu.left > .entry.label::after
{
   content: "<";
   float: left;
   padding-right: 10px;
}

.ctxmenu .submenu.right > .entries
{
   right: 0;
   translate: 100%;
}

.ctxmenu .submenu.left > .entries
{
   left: 0;
   translate: -100%;
}

.ctxmenu .submenu.up > .entries
{
   top: 100%;
   transform: translateY(-100%);
}

.ctxmenu .submenu.down > .entries
{
   top: 0;
   transform: translateY(0);
}

.ctxmenu, .ctxmenu .submenu:hover > .entries
{
   display: block;
   border: solid 2px #AAA;
   border-radius: 5px;
}
0