Anyone has idea how to create a sort of floating menu window via customtkinter?

[Gasiro]

I wish to create something like this menu window below:

I tried to create it via menu_toplevel.overrideredirect(True) but it turns out to have a rectangular frame around it instead of round corner. Anyone has idea about how to do it?

[dipeshSam]

Set Toplevel's background color as "systemTransparent".

For example,

top = CTkToplevel(master)
configure(bg_color="systemTransparent")

It will make background completely transparent. Note that this works in Unix like operating system such as macOS.

Regards.

[Gasiro]

I think configure(bg_color="systemTransparent") still keeps the rectangular frame. Yes it is on macOS.

[dipeshSam]

After setting bg_color transparent, try to enable transparency explicitly.

Like:

top = CTkToplevel(master)
top.configure(bg_color="systemTransparent")
top.attributes("-transparent", True)

Order of these two statements may matter. So, also try:

top = CTkToplevel(master)
top.attributes("-transparent", True)
top.configure(bg_color="systemTransparent")

Along with these, also make sure that no other widget is overlay on top window, if there are some, either we also need to set their background to "systemTransparent" or have some good paddings.

Regards.

[Gasiro]

Thank you so much Dipesh. It works now both on windows and macOS!

[dipeshSam]

You are most welcome @Gasiro . 😊

Keep your CustomTkinter journey continue.
Regards.

[Akascape]

@Gasiro

Here is a modern popup menu class you can use:

from customtkinter import *
import sys

class CTkFloatingWindow(CTkToplevel):
    """
    On-screen popup window class for customtkinter
    Author: Akascape
    """
    def __init__(self,
                 master=None,
                 corner_radius=15,
                 border_width=1,
                 **kwargs):
        
        super().__init__(takefocus=1)
        
        self.focus()
        self.master_window = master
        self.corner = corner_radius
        self.border = border_width
        self.hidden = True

        # add transparency to suitable platforms
        if sys.platform.startswith("win"):
            self.after(100, lambda: self.overrideredirect(True))
            self.transparent_color = self._apply_appearance_mode(self._fg_color)
            self.attributes("-transparentcolor", self.transparent_color)
        elif sys.platform.startswith("darwin"):
            self.overrideredirect(True)
            self.transparent_color = 'systemTransparent'
            self.attributes("-transparent", True)
        else:
            self.attributes("-type", "splash")
            self.transparent_color = '#000001'
            self.corner = 0
            self.withdraw()
             
        self.frame = CTkFrame(self, bg_color=self.transparent_color, corner_radius=self.corner,
                              border_width=self.border, **kwargs)
        self.frame.pack(expand=True, fill="both")
        
        self.master.bind("<Button-1>", lambda event: self._withdraw(), add="+") # hide menu when clicked outside
        self.bind("<Button-1>", lambda event: self._withdraw()) # hide menu when clicked inside
        self.master.bind("<Configure>", lambda event: self._withdraw()) # hide menu when master window is changed
        
        self.resizable(width=False, height=False)
        self.transient(self.master_window)
         
        self.update_idletasks()
        
        self.withdraw()
        
    def _withdraw(self):
        if not self.hidden:
            self.withdraw()
            self.hidden = True
        
    def popup(self, x=None, y=None):
        self.x = x
        self.y = y
        self.deiconify()
        self.focus()
        self.geometry('+{}+{}'.format(self.x, self.y))
        self.hidden = False


"""
main application
"""

def do_popup(event, frame):
    """ open the popup menu """
    try: frame.popup(event.x_root, event.y_root)
    finally: frame.grab_release()
    
root = CTk()

float_window = CTkFloatingWindow(root) # our popup menu

widget = CTkLabel(root, text="Right Click Here")
widget.pack(padx=20, pady=20)

widget.bind("<Button-3>", lambda event: do_popup(event, float_window)) # right click mouse bind
widget.bind("<Button-2>", lambda event: do_popup(event, float_window)) # mac os right click (optional)

# Add menu buttons in float_window.frame

menu_button = CTkButton(float_window.frame, text="Click Here 1", fg_color="transparent", command=lambda: print("Hello"))
menu_button.pack(expand=True, fill="x", padx=10, pady=(10,0))

menu_button2 = CTkButton(float_window.frame, text="Click Here 2", fg_color="transparent", command=lambda: print("Hello"))
menu_button2.pack(expand=True, fill="x", padx=10, pady=(5,0))

menu_button3 = CTkButton(float_window.frame, text="Click Here 3", fg_color="transparent", command=lambda: print("Hello"))
menu_button3.pack(expand=True, fill="x", padx=10, pady=(5,10))

root.mainloop()