How to move through the menu?

Question

Python

Hi all. I decided to deal with pygame. I want to implement a game menu. I don't know how to select a menu item.
How it should be:

How it's done now:

"game.py" code:

# -*- coding: utf-8 -*-
import pygame, menu
from pygame.locals import *

pygame.init() 
 
def mainloop():
      while True: 
            		for event in pygame.event.get(): 
            			if event.type == pygame.locals.QUIT: 
                 				pygame.quit() 
                 				return  
 
mainloop()

Code "menu.py" :

# -*- coding: utf-8 -*-
import pygame, sys

pygame.font.init()

bgcolor = (51, 51, 51)
font_color = (255, 255, 153)
highlite_color = (153, 102, 255)
font = pygame.font.Font('data/font/coders_crux.ttf', 72)
surface_width = 800
surface_height = 600

surface_menu = pygame.display.set_mode([surface_width,surface_height])

pygame.display.set_caption("Test")

surface_menu.fill(bgcolor)

def DrawText(text, font, surface_menu, x, y):
    	textobj = font.render(text, 1, font_color)
    	textrect = textobj.get_rect()
    	textrect.topleft = (x, y)
    	surface_menu.blit(textobj, textrect)

DrawText('Start', font, surface_menu, (surface_width/2)-65, (surface_height/2)-90)
DrawText('About', font, surface_menu, (surface_width/2)-65, (surface_height/2)-40)
DrawText('Exit', font, surface_menu, (surface_width/2)-50, (surface_height/2)+10)


pygame.display.update()

Answer 1

I can offer two options. The first is to take advantage of the additional background parameter when rendering the font:
But the fill rectangle will go strictly along the edge of the font, which is ugly.
The second option is to draw a rectangle of the desired color

def DrawText(text, font, surface_menu, x, y, selected = False):
    	textobj = font.render(text, 1, font_color)
    	textrect = textobj.get_rect()
    	textrect.topleft = (x, y)
    	if selected:
    	    highlight = pygame.Surface((len(text) * 33, 65))
    	    highlight.fill(highlite_color)
    	    surface_menu.blit(highlight, [x - 18, y - 15])
    	surface_menu.blit(textobj, textrect)

Thus, the menu.py code , which gives the result as in the screenshot, will be like this:

# -*- coding: utf-8 -*-
import pygame, sys

pygame.font.init()

bgcolor = (51, 51, 51)
font_color = (255, 255, 153)
highlite_color = (153, 102, 255)
font = pygame.font.Font('data/font/coders_crux.ttf', 72)
surface_width = 800
surface_height = 600

surface_menu = pygame.display.set_mode([surface_width,surface_height])

pygame.display.set_caption("Test")

surface_menu.fill(bgcolor)

def DrawText(text, font, surface_menu, x, y, selected = False):
    	textobj = font.render(text, 1, font_color)
    	textrect = textobj.get_rect()
    	textrect.topleft = (x, y)
    	if selected:
    	    highlight = pygame.Surface((len(text) * 33, 65))
    	    highlight.fill(highlite_color)
    	    surface_menu.blit(highlight, [x - 18, y - 15])
    	surface_menu.blit(textobj, textrect)

DrawText('Start', font, surface_menu, (surface_width/2)-65, (surface_height/2)-110, True)
DrawText('Options', font, surface_menu, (surface_width/2)-65, (surface_height/2)-40)
DrawText('Quit', font, surface_menu, (surface_width/2)-65, (surface_height/2)+30)


pygame.display.update()

Answer 2

Moving through the menu can be implemented in several ways, information from the site programmingnew.my1.ru/blog
1) as mentioned above, in the line for displaying text information, enter the active and inactive color, and the activation of the color color when checking the position of the mouse cursor. Code example:
class Menu:
def __init__(self,punkt=[120,140,u'Punkt',(250,25,250),(250,250,25),0]):
self.punkts=punkts
self.ppunkts=ppunkts
def render( self,poverhnost,font,num_punkt):# highlight active item
for i in self.punkts:
if num_punkt == i[5]:
poverhnost.blit(font.render(i[2],1,i[4]), (i[0],i[1])
)
poverhnost.blit(font.render(i[2],1,i[3]),(i[0],i[1]))
def menu(self):
done = True
font_menu = pygame.font.Font( None,50) # define font
pygame.key.set_repeat(0,0) # disable sticky buttons
pygame.mouse.set_visible(True) # see mouse cursor
punkt = 0
while done:
screen.fill((0,100,200)) # paint game fields(menu screen)
# hover over menu item
# check for mouse events
mp = pygame.mouse.get_pos() # get cursor coordinates [0]-x, [1]-y
for i in self.punkts:
if mp[0 ]>i[0] and mp[0] i[1] and mp[1]0:
punkt-=1
if e.key == pygame.K_DOWN:
if punkt< len(self.punkts)-1:
punkt +=1
if e.key == pygame.K_SPACE:# activate menu item with space key
if punkt == 0:
done = False
if punkt == 1:
sys.exit()
if punkt == 2:
men(im1,b)
if e.type == pygame.MOUSEBUTTONDOWN and e.button ==1:
if punkt = = 0:
done = False
if punkt == 1:
sys.exit()
if punkt == 2:
men(im1,b)
screen.blit(im1,(240,140))
window.blit(screen,(0,30)) # draw on screen window for the menu
pygame.display.flip() # display everything
2) Using rectangles, we associate the menu item with the event, and moving through the items is visually displayed by changing the color of the item or the appearance of an activating image. Code for menu items: https://www.youtube.com/watch?v=r_IkOU9PEXA