It is currently June 2nd, 2020, 12:17 pm

Adding a Submenu to a Menu

Help with creating, editing & fixing problems with skins
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3949
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Adding a Submenu to a Menu

Post by eclectic-tech »

wolfnuka wrote:
January 13th, 2020, 10:04 pm
sure, no problem:
...

what i am having issues with, is finding a way to hold the submenu items, and deactivate them and activate them as needed depending on the selected main menu icon, one way would be to put each submenu on a different .ini file, and activate them when the corresponding main menu icon is pressed, but then how to deactivate them as another main menu icon is pressed?
As suggested by balala, here is a sample menu system that uses Meter Groups and has all the menu items in the same file.
This eliminates the need to activate/deactivate multiple skins; everything is in 1 skin.

I used your "bar" images sections for the main menu and sub-menu areas (they should be Image Meters since Bar Meters require a MeasureName to work).

I removed your highlighting sections and use !SetOption to change the SolidColor of the main icons to highlight them when hovered.
I use the mouse leave on the [bar2] section to hide all sub-menus when the mouse leaves the background.

I created 3 groups of meters:
Group=Menu is all sub-menus and the sub-menu background ([bar2]); this is used to hide all sub-menus when an item is clicked or the mouse moves off the background. Notice that [Bar2] is a member in ALL 'Menu#' groups.
Group=Menu1 is the game menu items and bar2 background; it is visible when you click [Image1]
Group=Menu2 is the work items and bar2 background; it is visible when you click [Image2]

To add more menus, add another [Image#] main menu icon. And create a group 'Menu3' with the items you want to show in that sub-menu (the easiest way to create a new sub-menu is to copy a previous group of 'Menu#' meters and edit the group name, text or image, and the mouse actions).

Code: Select all

;================Menu items background=========================

[Bar2]
Group=Menu | Menu1 | Menu2
Meter=Image
W=250
H=(#SCREENAREAHEIGHT#-400)
SolidColor=241,241,241,90
Hidden=1
MouseLeaveAction=[!HideMeterGroup Menu][!UpdateMeter *][!Redraw]

;================MAIN MENU BACKGROUND=========================
[Bar1]
Meter=Image
W=50
H=(#SCREENAREAHEIGHT#-400)
SolidColor=333333


;================MAIN MENU ICON PATH & SHORTCUTS ADDRESSES======
[Image1]
Meter=Image
ImageName=buttonr
;Joystick
H=35
W=35
x=9
y=2r
SolidColor=0,0,0,1
LeftMouseUpAction=[!HideMeterGroup Menu][!ToggleMeterGroup Menu1][!UpdateMeter *][!Redraw] 
MouseOverAction=[!SetOption #CurrentSection# SolidColor "160,160,160,160"][!UpdateMeter *][!Redraw]
MouseLeaveAction=[!SetOption #CurrentSection# SolidColor "160,160,160,1"][!UpdateMeter *][!Redraw]
ToolTipText="Gaming"

[Image2]
Meter=Image
ImageName=buttong
;Joystick
H=35
W=35
x=r
y=2R
SolidColor=0,0,0,1
LeftMouseUpAction=[!HideMeterGroup Menu][!ToggleMeterGroup Menu2][!UpdateMeter *][!Redraw] 
MouseOverAction=[!SetOption #CurrentSection# SolidColor "160,160,160,160"][!UpdateMeter *][!Redraw]
MouseLeaveAction=[!SetOption #CurrentSection# SolidColor "160,160,160,1"][!UpdateMeter *][!Redraw]
ToolTipText="Work"

;================MENU1 ITEMS======

[Menu1.1]
Group=Menu | Menu1
Meter=String
X=52
Y=[Image1:Y]
FontSize=14
Text="Game1"
Hidden=1
DynamicVariables=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game1 clicked."]

[Menu1.2]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game2"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game2 clicked."]

[Menu1.3]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game3"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game3 clicked."]

[Menu1.4]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game4"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game4 clicked."]

[Menu1.5]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game5"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game5 clicked."]

[Menu1.6]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game6"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game6 clicked."]

[Menu1.7]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game7"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game7 clicked."]

[Menu1.8]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game8"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game8 clicked."]

;================MENU2 ITEMS======

[Menu2.1]
Group=Menu | Menu2
Meter=String
X=52
Y=[Image1:Y]
FontSize=14
Text="Work1"
Hidden=1
DynamicVariables=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work1 clicked."]

[Menu2.2]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work2"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work2 clicked."]

[Menu2.3]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work3"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work3 clicked."]

[Menu2.4]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work4"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work4 clicked."]

[Menu2.5]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work5"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work5 clicked."]

[Menu2.6]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work6"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work6 clicked."]

[Menu2.7]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work7"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work7 clicked."]

[Menu2.8]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work8"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work8 clicked."]
menu2.gif
Hope this gives you some ideas to work with... :welcome:
You do not have the required permissions to view the files attached to this post.
User avatar
balala
Rainmeter Sage
Posts: 10664
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Adding a Submenu to a Menu

Post by balala »

eclectic-tech wrote:
January 15th, 2020, 4:47 am

Code: Select all

;================Menu items background=========================

[Bar2]
Group=Menu | Menu1 | Menu2
Meter=Image
W=250
H=(#SCREENAREAHEIGHT#-400)
SolidColor=241,241,241,90
Hidden=1
MouseLeaveAction=[!HideMeterGroup Menu][!UpdateMeter *][!Redraw]

;================MAIN MENU BACKGROUND=========================
[Bar1]
Meter=Image
W=50
H=(#SCREENAREAHEIGHT#-400)
SolidColor=333333


;================MAIN MENU ICON PATH & SHORTCUTS ADDRESSES======
[Image1]
Meter=Image
ImageName=buttonr
;Joystick
H=35
W=35
x=9
y=2r
SolidColor=0,0,0,1
LeftMouseUpAction=[!HideMeterGroup Menu][!ToggleMeterGroup Menu1][!UpdateMeter *][!Redraw] 
MouseOverAction=[!SetOption #CurrentSection# SolidColor "160,160,160,160"][!UpdateMeter *][!Redraw]
MouseLeaveAction=[!SetOption #CurrentSection# SolidColor "160,160,160,1"][!UpdateMeter *][!Redraw]
ToolTipText="Gaming"

[Image2]
Meter=Image
ImageName=buttong
;Joystick
H=35
W=35
x=r
y=2R
SolidColor=0,0,0,1
LeftMouseUpAction=[!HideMeterGroup Menu][!ToggleMeterGroup Menu2][!UpdateMeter *][!Redraw] 
MouseOverAction=[!SetOption #CurrentSection# SolidColor "160,160,160,160"][!UpdateMeter *][!Redraw]
MouseLeaveAction=[!SetOption #CurrentSection# SolidColor "160,160,160,1"][!UpdateMeter *][!Redraw]
ToolTipText="Work"

;================MENU1 ITEMS======

[Menu1.1]
Group=Menu | Menu1
Meter=String
X=52
Y=[Image1:Y]
FontSize=14
Text="Game1"
Hidden=1
DynamicVariables=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game1 clicked."]

[Menu1.2]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game2"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game2 clicked."]

[Menu1.3]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game3"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game3 clicked."]

[Menu1.4]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game4"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game4 clicked."]

[Menu1.5]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game5"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game5 clicked."]

[Menu1.6]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game6"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game6 clicked."]

[Menu1.7]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game7"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game7 clicked."]

[Menu1.8]
Group=Menu | Menu1
Meter=String
X=r
Y=2R
FontSize=14
Text="Game8"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Game8 clicked."]

;================MENU2 ITEMS======

[Menu2.1]
Group=Menu | Menu2
Meter=String
X=52
Y=[Image1:Y]
FontSize=14
Text="Work1"
Hidden=1
DynamicVariables=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work1 clicked."]

[Menu2.2]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work2"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work2 clicked."]

[Menu2.3]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work3"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work3 clicked."]

[Menu2.4]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work4"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work4 clicked."]

[Menu2.5]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work5"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work5 clicked."]

[Menu2.6]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work6"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work6 clicked."]

[Menu2.7]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work7"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work7 clicked."]

[Menu2.8]
Group=Menu | Menu2
Meter=String
X=r
Y=2R
FontSize=14
Text="Work8"
Hidden=1
LeftMouseUpAction=[!HideMeterGroup Menu][!Log "Work8 clicked."]
I sincerely hope you don't mind, but I'd make a few comments related to the above code:
  • If you post such a code, it is always useful to make it to work without the, in this case needed image files. For instance in your code there are needed at least two such images buttonr.png and buttong.png, used into the [Image1] and [Image2] meters respectively. For a beginner like wolfnuka, the author of this topic, is probably hard enough to figure out that the corresponding meters are not visible exactly due to the missing .pngs. SolidColors would be better and much simpler in this case.
  • Maybe it's just me, but I doubt would be a good idea to use both types of color codes, decimals and hexadecimals, into the same skin. You have such different codes for example into the [Bar2] and [Bar1] meters:

    Code: Select all

    [Bar2]
    ...
    SolidColor=241,241,241,190
    ...
    
    [Bar1]
    ...
    SolidColor=333333
    ...
    Again although it perfectly works, it also may mislead the beginners, so should be avoided, as much as possible.
  • You don't have to update the meters (especially not all of them) when you're just hiding one of them. In many cases not even if you're showing them, but if you're hiding them, definitely this is a useless operation. For instance the [!UpdateMeter *] bang of the LeftMouseUpAction option of the [Bar2] meter is useless and should be removed: MouseLeaveAction=[!HideMeterGroup Menu][!Redraw]. There is no reason to update all meters, when you're hiding one meter. Redrawing the skin (through the [!Redraw] bang) does perfectly make sense, but updating all meters, doesn't.
  • As you probably know well, the options don't have to be included into quotations. Rainmeter simply ignores those, so they are useless as well. For instance the ToolTipText option of the [Image1] meter has such quotes: ToolTipText="Gaming". Although don't cause any trouble, neither useful are, so you simply can get rid of them.
Again, I hope you don't mind I posted these comments. Was not my intention to offend you, just had to say.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3949
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Adding a Submenu to a Menu

Post by eclectic-tech »

@ balala

wolfnuka used those color codes (not me)...
I didn't include my images (just like the OP didn't include theirs)...
the code shows how to use GROUPS and is in no way perfect coding... :phhht

I could have just referred them to GROUP in the manual and hope they could figure it out, but code (even imperfect) is sometimes more helpful.
User avatar
balala
Rainmeter Sage
Posts: 10664
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Adding a Submenu to a Menu

Post by balala »

eclectic-tech wrote:
January 16th, 2020, 2:35 am
@ balala

wolfnuka used those color codes (not me)...
I didn't include my images (just like the OP didn't include theirs)...
the code shows how to use GROUPS and is in no way perfect coding... :phhht

I could have just referred them to GROUP in the manual and hope they could figure it out, but code (even imperfect) is sometimes more helpful.
Definitely. What has I said (or at least wanted) is that if you're posting a code especially for a beginner (which wolfnuka probably is, having just two posts), it is better to either attach the images or use solid colors. Even if he has used some not posted images, if you're using others and he doesn't have them, he probably won't see the appropriate meters and not sure he is able to figure out why.
Again, I didn't want to criticize you, had just a suggestion.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 3949
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Adding a Submenu to a Menu

Post by eclectic-tech »

8-)
wolfnuka
Posts: 15
Joined: January 13th, 2020, 7:14 pm

Re: Adding a Submenu to a Menu

Post by wolfnuka »

thank you everyone for the help and helpful information, I am still working on this and I finally got a handle of the submenu issue, now I even made it slide!, haha, hopefully it won't be long, but this has been a bit of a rabbit hole for me, now I'm adding a configuration input for the skin, I'm trying to make it as flexible as possible to do quick edits for images, fonts and colors, I will make sure to post the download link if you guys would like to try it, and again, thank you everyone!
User avatar
balala
Rainmeter Sage
Posts: 10664
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Adding a Submenu to a Menu

Post by balala »

wolfnuka wrote:
February 1st, 2020, 7:39 am
I will make sure to post the download link if you guys would like to try it,
We will (me personally for sure). Just post the link.