การเปรียบเทียบ CSS | เอกสาร - ศูนย์กลางครีเอเตอร์ Roblox

แนวคิดส่วนใหญ่ของ CSS ตรงกับแนวคิดการจัดรูปแบบของ Roblox ตัวอย่างต่อไปนี้แสดงให้เห็นว่าคอนเซ็ปต์ CSS และ HTML สอดคล้องกับ Luau และคลาส/คุณสมบัติของ Roblox อย่างไร

ในการทดสอบแต่ละตัวอย่างสคริปต์ Luau ต่อไปนี้:

ใน Explorer ให้สร้างสิ่งต่อไปนี้:
1. StyleSheet อินสแตนซ์ภายใน ReplicatedStorage.
2. ตัวจัดเก็บ ScreenGui ใน StarterGui.
3. อินสแตนซ์ LocalScript ภายใน ScreenGui.
4. วัตถุ StyleLink ภายใน ScreenGui.

ใน LocalScript ให้วางโค้ดสนับสนุนต่อไปนี้:

LocalScript
local CollectionService = game:GetService("CollectionService")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local coreSheet = ReplicatedStorage:FindFirstChildWhichIsA("StyleSheet")
local screenGui = script.Parent
local styleLink = screenGui:FindFirstChildWhichIsA("StyleLink")
styleLink.StyleSheet = coreSheet

สำหรับแต่ละตัวอย่างด้านล่าง ให้วางบรรทัดโค้ด Luau ตามที่สนับสนุนบรรทัด 1–7.

ตัวเลือก

คุณสมบัติ Selector ของ StyleRule ระบุว่ากฎไหนควรมีผลต่ออินสแตนซ์ใด ตัวเลือกเฉพาะหลายประเภทเชื่อมโยงจาก CSS ไปยัง Luau และสามารถใช้ร่วมกับตัวประกอบได้

องค์ประกอบ

องค์ประกอบที่เทียบเท่ากับตัวเลือกองค์ประกอบ CSS คือ ตัวเลือกคลาส ของ Roblox ที่เลือกอินสแตนซ์ทั้งหมดของคลาส GuiObject ที่กำหนด เช่น Frame, ImageLabel, TextButton ฯลฯ

CSS
button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 15%;
	height: 40px;
	border: none;
}

HTML
<button>เมนูหลัก</button>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "TextButton" -- ตัวเลือกคลาส Roblox
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})

local button = Instance.new("TextButton")
button.Text = "เมนูหลัก"
button.Parent = screenGui

คลาส

ภาพรวมที่ตรงกับ CSS class selectors ของ Roblox คือ tag selectors ที่ใช้ แท็ก ที่ใช้ในการจัดกลุ่มผ่าน CollectionService.

CSS
.button-primary {
	background-color: #335FFF;
	color: #E1E1E1;
}

HTML
<button class="button-primary">เมนูหลัก</button>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".ButtonPrimary" -- ตัวเลือกแท็ก Roblox
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	AutomaticSize = Enum.AutomaticSize.XY
})

local button = Instance.new("TextButton")
button.Text = "เมนูหลัก"
button.Parent = screenGui
-- เพิ่มแท็กให้กับปุ่ม
CollectionService:AddTag(button, "ButtonPrimary")

ตัวระบุ

การเปรียบเทียบที่ใกล้เคียงที่สุดของ Roblox กับ CSS id คือ ตัวเลือก #[name] ที่เลือกระหว่างค่าว่าอะไรคือ Instance.Name แตกต่างจาก W3C specification ของคุณสมบัติ id ชื่อไม่จำเป็นต้องไม่ซ้ำกัน

CSS
#modal-frame {
	background-color: #000022;
	opacity: 0.5;
	width: 50%;
	min-height: 100px;
}

HTML
<div id="modal-frame"></div>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "#ModalFrame" -- ตัวเลือกชื่ออินสแตนซ์
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("000022"),
	BackgroundTransparency = 0.5,
	Size = UDim2.new(0.5, 0, 0, 100),
	AutomaticSize = Enum.AutomaticSize.Y
})

local frame = Instance.new("Frame")
frame.Parent = screenGui
-- เปลี่ยนชื่อเฟรมให้ตรงกับตัวเลือก
frame.Name = "ModalFrame"

ตัวประกอบ

ตัวประกอบช่วยให้คุณผสมผสาน ตัวเลือก พื้นฐานเพื่อจับคู่ความสัมพันธ์ลำดับชั้นที่ลึกซึ้งยิ่งขึ้น

เด็ก

ตัวเลือกเด็ก > เป็นเหมือนกันระหว่าง CSS และ Roblox

CSS
.menu-container {
	width: 25%;
}

.menu-container > button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML
<div class="menu-container">
	<button>ตัวเลือก</button>
</div>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".MenuContainer > TextButton" -- ตัวเลือกเด็ก
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- สร้างเมนูคอนเทนเนอร์
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- เพิ่มแท็ก
CollectionService:AddTag(menuContainer, "MenuContainer")

-- สร้างปุ่ม
local button = Instance.new("TextButton")
button.Text = "ตัวเลือก"
-- ตั้งค่าเมนูคอนเทนเนอร์เป็นพ่อของปุ่ม
button.Parent = menuContainer

ลูกหลาน

แตกต่างจากไวยากรณ์ของช่องว่างใน CSS เช่น .menu-container button ที่เห็นที่นี่ Roblox ใช้ตัวประกอบ >> เพื่อระบุความสัมพันธ์ของลูกหลาน

CSS
.menu-container {
	width: 25%;
}

.sub-container {
	width: 75%;
}

.menu-container button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 80%;
	height: 40px;
	border: none;
}

HTML
<div class="menu-container">
	<div class="sub-container">
		<button>ตัวเลือก</button>
	</div>
</div>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = ".MenuContainer >> TextButton" -- ตัวเลือกลูกหลาน
rule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})

-- สร้างเมนูคอนเทนเนอร์
local menuContainer = Instance.new("Frame")
menuContainer.Size = UDim2.new(0.25, 0, 0, 0)
menuContainer.AutomaticSize = Enum.AutomaticSize.Y
menuContainer.Parent = screenGui
-- เพิ่มแท็ก
CollectionService:AddTag(menuContainer, "MenuContainer")

-- สร้างซับคอนเทนเนอร์
local subContainer = Instance.new("Frame")
subContainer.Size = UDim2.new(0.75, 0, 0, 0)
subContainer.AutomaticSize = Enum.AutomaticSize.Y
-- ตั้งค่าเมนูคอนเทนเนอร์เป็นพ่อของซับคอนเทนเนอร์
subContainer.Parent = menuContainer

-- สร้างปุ่ม
local button = Instance.new("TextButton")
button.Text = "ตัวเลือก"
-- ตั้งค่าซับคอนเทนเนอร์เป็นพ่อของปุ่ม
button.Parent = subContainer

รายการตัวเลือก

ตัวเลือกหลายตัวเลือก (รวมถึงตัวเลือกที่มีตัวประกอบ) สามารถประกาศได้ด้วยบล็อกคุณสมบัติเดียวกัน แยกด้วยเครื่องหมายจุลภาค เพื่อเพื่อลดความซ้ำซ้อน

CSS
img, p {
	background-color: #FF0033;
}

HTML
<img src="gear.png" width="100" height="100">

<p>เมนูหลัก</p>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "ImageLabel, TextLabel" -- ตัวเลือกสำหรับป้ายกำกับภาพและป้ายกำกับข้อความ
rule:SetProperty("BackgroundColor3", Color3.fromHex("ff0033"))

-- สร้างป้ายกำกับภาพ
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.Parent = screenGui

-- สร้างป้ายกำกับข้อความ
local textLabel = Instance.new("TextLabel")
textLabel.Size = UDim2.new(1, 0, 0, 0)
textLabel.AutomaticSize = Enum.AutomaticSize.Y
textLabel.TextXAlignment = Enum.TextXAlignment.Left
textLabel.TextYAlignment = Enum.TextYAlignment.Top
textLabel.Text = "เมนูหลัก"
textLabel.Parent = screenGui

คลาสพิเศษ

การเปรียบเทียบ Roblox กับ CSS pseudo-class selectors คือ state selectors ซึ่งตรงกับหนึ่งในสี่ Enum.GuiState ค่า เช่น Hover หรือ Press.

CSS
img:hover {
	opacity: 0.5;
}

HTML
<img src="gear.png" width="100" height="100">

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "ImageLabel:Hover" -- ตัวเลือกสถานะ
rule:SetProperty("ImageTransparency", 0.5)

-- สร้างป้ายกำกับภาพ
local imageLabel = Instance.new("ImageLabel")
imageLabel.Image = "rbxassetid://104919049969988"
imageLabel.Size = UDim2.new(0, 100, 0, 100)
imageLabel.BackgroundTransparency = 1
imageLabel.Parent = screenGui

คล้ายกับ CSS pseudo-elements ที่สามารถปรับแต่งส่วนเฉพาะขององค์ประกอบได้ Roblox สามารถสร้าง UIComponents ที่เป็นภาพลวงตาผ่านคุณสมบัติ Selector ของกฎสไตล์ ตัวอย่างเช่น กฎต่อไปนี้จะสร้างตัวปรับ UICorner ภายใต้ Frame ทุกตัวที่มีแถบ RoundedCorner20 และตั้งค่ารัศมีของโมดิฟายเออร์แต่ละตัวเป็น 20 พิกเซล

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

rule.Selector = "Frame.RoundedCorner20::UICorner" -- ตัวเลือกคอมโพเนนต์ UI
rule:SetProperty("CornerRadius", UDim.new(0, 20))

-- สร้างเฟรม
local frame = Instance.new("Frame")
frame.Size = UDim2.new(0.4, 0, 0.2, 0)
frame.Parent = screenGui
-- เพิ่มแท็กให้กับเฟรม
CollectionService:AddTag(frame, "RoundedCorner20")

การสืบค้น

Roblox style queries เป็นเส้นทางเชื่อมโยงระหว่าง CSS media queries และ container queries โดยใช้พรีฟิก @ คุณสามารถสลับสไตล์ตามขนาดของพ่อแม่ ประเภทอุปกรณ์อินพุต หรือการตั้งค่าการเข้าถึงของผู้ใช้

ใน CSS @container ใช้เพื่อใช้สไตล์ตามขนาดของส่วนประกอบพ่อ ใน Roblox คุณจะกำหนดพรีโอตนซ์ pseudo-instance query โดยใช้ ::StyleQuery ตามด้วย ตัวระบุ สำหรับคุณสมบัติ Selector ของเงื่อนไข ตัวอย่างเช่น "::StyleQuery #WideContainer" ควบคู่กับชื่อเงื่อนไข StyleQuery เช่น "MinSize" เพื่อประเมิน GuiObject.AbsoluteSize ของผู้ปกครอง จากนั้นจึงสร้าง StyleRule โดยมี @[identifier] prefix เป็นคุณสมบัติ Selector เช่น @WideContainer ที่ใช้ในการจัดสไตล์ให้กับอินสแตนซ์หรือบุตรของมันเมื่อคำถามใช้งานอยู่.

CSS
.container {
	container-type: inline-size;
	background-color: rgba(0, 0, 34, 0.5);
}
button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 75%;
	height: 40px;
	border: none;
}

@container (min-width: 400px) {
	button {
		background-color: #cc0033;
	}
}

HTML
<div class="container" style="width: 80%; height: 200px;">
	<button>เมนูหลัก</button>
</div>

Luau
-- กฎของคอนเทนเนอร์
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- ตัวเลือคลาส Roblox
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- กฎปุ่ม
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- ตัวเลือคลาส Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.75, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = containerRule -- เป็นลูกของกฎคอนเทนเนอร์

-- เงื่อนไขการค้นหา (#WideContainer)
local queryCondition = Instance.new("StyleRule")
queryCondition.Selector = "::StyleQuery #WideContainer"
queryCondition:SetProperty("MinSize", Vector2.new(400, 0))
queryCondition.Parent = containerRule -- เป็นลูกของกฎคอนเทนเนอร์

-- กฎที่ใช้เมื่อเงื่อนไขทำงาน (@WideContainer)
local queryStyle = Instance.new("StyleRule")
queryStyle.Selector = "@WideContainer Frame > TextButton" -- ตัวเลือกเด็ก
queryStyle:SetProperty("BackgroundColor3", Color3.fromHex("CC0033"))
queryStyle.Parent = containerRule -- เป็นลูกของกฎคอนเทนเนอร์

-- สร้างอินสแตนซ์
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui
local button = Instance.new("TextButton")
button.Text = "เมนูหลัก"
button.Parent = container

Roblox ยังให้บริการ built-in queries ที่เชื่อมโยงโดยตรงกับสถานะของสภาพแวดล้อมทั่วโลก เช่น ViewportDisplaySize หรือ ReducedMotionEnabled. สิ่งเหล่านี้ไม่ต้องการการกำหนดค่า ::StyleQuery และสามารถใช้ได้โดยตรงด้วยพรีฟิก @.

คุณสมบัติของ CSS Media	ตัวเลือกการค้นหาสไตล์ Roblox
(max-width: 600px)	@ViewportDisplaySizeSmall
(min-width: 601px) and (max-width: 1200px)	@ViewportDisplaySizeMedium
(min-width: 1201px)	@ViewportDisplaySizeLarge
(pointer: fine)	@PreferredInputKeyboardAndMouse
(pointer: coarse)	@PreferredInputTouch
(any-pointer: coarse)	@PreferredInputGamepad
(prefers-reduced-motion: reduce)	@ReducedMotionEnabledTrue
(prefers-reduced-motion: no-preference)	@ReducedMotionEnabledFalse

CSS
.container {
	container-type: inline-size;
	background-color: rgba(0, 0, 34, 0.5);
}

@media (prefers-reduced-motion: reduce) {
	.container {
		background-color: rgba(0, 0, 34, 1);
	}
}

HTML
<div class="container" style="width: 80%; height: 200px;">
</div>

Luau
-- กฎคอนเทนเนอร์
local containerRule = Instance.new("StyleRule")
containerRule.Selector = "Frame" -- ตัวเลือคลาส Roblox
containerRule:SetProperties({
	BackgroundColor3 = Color3.fromRGB(0, 0, 34),
	BackgroundTransparency = 0.5,
	BorderSizePixel = 0
})
containerRule.Parent = coreSheet

-- การค้นหาที่รวมอยู่
local motionRule = Instance.new("StyleRule")
motionRule.Selector = "@ReducedMotionEnabledTrue Frame"
motionRule:SetProperty("BackgroundTransparency", 0)
motionRule.Parent = containerRule -- เป็นลูกของกฎคอนเทนเนอร์

-- สร้างอินสแตนซ์
local container = Instance.new("Frame")
container.Size = UDim2.new(0.8, 0, 0, 200)
container.Parent = screenGui

ตัวแปร

CSS อนุญาตให้คุณประกาศและอ้างอิง ตัวแปร ทั่วทั้งระบบกานจัดรูปแบบ โดย Roblox ทำได้ผ่านระบบโทเคนและ คุณสมบัติของอินสแตนซ์. โดยใช้ $ เป็นพรีฟิก คุณสามารถอ้างอิงคุณสมบัติที่ประกาศใน StyleRule หรือ StyleSheet chain การสืบทอดเมื่อกำหนดค่าคุณสมบัติของสไตล์

CSS
:root {
	--button-bg-color: #335FFF;
	--button-text-color: #E1E1E1;
}

button {
	background-color: var(--button-bg-color);
	color: var(--button-text-color);
}

HTML
<button>เมนูหลัก</button>

Luau
local rule = Instance.new("StyleRule")
rule.Parent = coreSheet

-- ตั้งค่าโทเคนชีตสไตล์โดยใช้คุณสมบัติ
coreSheet:SetAttribute("ButtonBgColor", Color3.fromHex("335FFF"))
coreSheet:SetAttribute("ButtonTextColor", Color3.fromHex("E1E1E1"))

rule.Selector = "TextButton" -- ตัวเลือกคลาส
rule:SetProperties({
	BackgroundColor3 = "$ButtonBgColor",
	TextColor3 = "$ButtonTextColor"
})

-- สร้างปุ่ม
local button = Instance.new("TextButton")
button.AutomaticSize = Enum.AutomaticSize.XY
button.Text = "เมนูหลัก"
button.Parent = screenGui

การเปลี่ยนผ่าน

CSS transitions ช่วยให้คุณทำการทวีคูณค่าคุณสมบัติตามระยะเวลาที่กำหนด คุณสามารถทำสิ่งนี้ใน Roblox โดยการตั้งค่าการเปลี่ยนคุณสมบัติใน StyleRule ผ่าน SetPropertyTransition() (หนึ่งเดียว) หรือ SetPropertyTransitions() (หลายรายการ).

ฟีเจอร์นี้กำลังอยู่ในสถานะเบต้า เปิดใช้งานผ่าน ไฟล์ ⟩ ฟีเจอร์เบต้า ⟩ Styling Transitions.

CSS
button {
	background-color: #335FFF;
	color: #E1E1E1;
	width: 15%;
	height: 40px;
	border: none;
	transition:
		background-color 1s ease-out,
		transform 1.25s ease-out
}
button:hover {
	background-color: #33AAFF;
	transform: rotate(-5deg);
}

HTML
<button>เมนูหลัก</button>

Luau
-- กฎปุ่ม
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "TextButton" -- ตัวเลือคลาส Roblox
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.15, 0, 0, 40),
	BorderSizePixel = 0
})
-- ตั้งค่าพฤติกรรมการเปลี่ยนคุณสมบัติ
buttonRule:SetPropertyTransitions({
	BackgroundColor3 = TweenInfo.new(1, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out),
	Rotation = TweenInfo.new(1.25, Enum.EasingStyle.Cubic, Enum.EasingDirection.Out)
})
buttonRule.Parent = coreSheet

-- กฎปุ่ม Hover
local hoverRule = Instance.new("StyleRule")
hoverRule.Selector = "TextButton:Hover" -- ตัวเลือกสถานะ
hoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundColor3 = Color3.fromHex("33AAFF"),
	Rotation = -5
})
hoverRule.Parent = coreSheet

-- สร้างปุ่มข้อความ
local button = Instance.new("TextButton")
button.Text = "เมนูหลัก"
button.Parent = screenGui

การซ้อนและการรวม

การนำแนวคิดจาก SCSS มาใช้ StyleRules สามารถซ้อนกันและตัวเลือกของมันจะ รวมกัน.

SCSS
#menu-frame {
	background-color: #000022;
	width: 25%;
	min-height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	
	> button {
		background-color: #335FFF;
		color: #E1E1E1;
		width: 80%;
		height: 40px;
		border: none;
		
		&:hover {
			opacity: 0.5;
		}
	}
}

HTML
<div id="menu-frame">
	<button>Charms</button>
	<button>Mana</button>
	<button>Scrolls</button>  
</div>

Luau
-- กฎเฟรมเมนู
local menuFrameRule = Instance.new("StyleRule")
menuFrameRule.Selector = "#MenuFrame"
menuFrameRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("000022"),
	Size = UDim2.new(0.25, 0, 0, 200),
	AutomaticSize = Enum.AutomaticSize.Y
})
menuFrameRule.Parent = coreSheet

-- กฎเลย์เอาต์เมนู
local menuLayoutRule = Instance.new("StyleRule")
menuLayoutRule.Selector = "::UIListLayout"
menuLayoutRule:SetProperties({
	FillDirection = Enum.FillDirection.Vertical,
	VerticalFlex = Enum.UIFlexAlignment.SpaceEvenly,
	HorizontalAlignment = Enum.HorizontalAlignment.Center
})
menuLayoutRule.Parent = menuFrameRule -- ตั้งกฎของเฟรมเมนูเป็นพ่อ

-- กฎปุ่ม
local buttonRule = Instance.new("StyleRule")
buttonRule.Selector = "> TextButton"
buttonRule:SetProperties({
	BackgroundColor3 = Color3.fromHex("335FFF"),
	TextColor3 = Color3.fromHex("E1E1E1"),
	Size = UDim2.new(0.8, 0, 0, 40),
	BorderSizePixel = 0
})
buttonRule.Parent = menuFrameRule -- ตั้งกฎของเฟรมเมนูเป็นพ่อ

-- กฎปุ่ม Hover
local buttonHoverRule = Instance.new("StyleRule")
buttonHoverRule.Selector = ":Hover"
buttonHoverRule:SetProperties({
	AutoButtonColor = false,
	BackgroundTransparency = 0.5,
	TextTransparency = 0.5
})
buttonHoverRule.Parent = buttonRule -- ตั้งกฎปุ่มเป็นพ่อ

-- สร้างเฟรมพ่อ
local menuFrame = Instance.new("Frame")
menuFrame.Name = "MenuFrame"
menuFrame.Parent = screenGui

-- สร้างปุ่มภายในเฟรม
local button1 = Instance.new("TextButton")
button1.Text = "Charms"
button1.Parent = menuFrame
local button2 = Instance.new("TextButton")
button2.Text = "Mana"
button2.Parent = menuFrame
local button3 = Instance.new("TextButton")
button3.Text = "Scrolls"
button3.Parent = menuFrame