Creating dropdown menu with auto collapse
#1
Hi, i need a little help..
How do i create a conditional dropdown menu? I haven't seen this on the other skins

I'm trying to create this for Ace's vertical home menu,
So i have 3 Menus here :

Image
Anime, Film Asia, Film Barat (Western Movies)
each has 5 submenus A-E, F-J, K-O, P-T, U-Z

And when clicked they should expand and show those submenus below them,
just like explorer.
But you cannot expand multiple submenus, it's limited to 1.
so when menu A is expanded,
and you are trying to expand menu B, menu A will close itself / auto collapse

e.g :

1.Click Anime, Anime submenus expanded

Anime
> A - E
> F - J
> K -O
> P - T
> U - Z
Film Asia
Film Barat

2. Click Film Asia, Anime Menu Collapsed automatically, Film Asia submenu expanded

Anime
Film Asia
> A - E
> F - J
> K -O
> P - T
> U - Z
Film Barat

I just need the general idea to achieve this.. cause i haven't seen this on other skins

thanks
Reply
#2
Ok i'm trying to do this from scratch..

I can't figure out one thing,
what if i want the list container to display non-static content in a static content..?
In this case i want the font to be different for each item in list container,

e.g

Anime should have 19 font
Film Asia should have 16 font

I have removed the font tag in <control type="list" id="9000">
But assigning each item id's in Menu_content with different <font></font> doesn't seem to do the trick
Reply
#3
Your question is pretty vague. Could you post the code to pastebin or something?
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#4
(2013-04-28, 21:37)MassIV Wrote: Your question is pretty vague. Could you post the code to pastebin or something?

Err the code is still basically the same with Ace's ...
Which part is vague ?

I just want to know how to have 2 different font sizes on 1 list container...
Let's say i have this menu & submenu :

Anime
> A - E
> F - J
> K -O
> P - T
> U - Z

I want the Anime to have Font_29
And the 5 submenus below it to have Font_19

That's it..

Why? well menu and submenu should have different font sizes...

I tried assigning <font> tag on each list container item,
but it didn't work, probably because it's not a supported tag...

Edit : almost forgot,
For my case both menu and submenu items must be stored in the same list container, because i'm trying to achieve dropdown style
Or is it possible to have separate list containers for menu & submenu for this case?
Reply
#5
And i have that menu somehow memorized?

Two label controls, each with their own font. With their visibility based on the item property you define in the content.
Code:
<visible>!IsEmpty(ListItem.Property(dropdown))</visible>

<property name="dropdown">not_empty</property>
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#6
(2013-04-29, 04:42)MassIV Wrote: And i have that menu somehow memorized?

Two label controls, each with their own font. With their visibility based on the item property you define in the content.
Code:
<visible>!IsEmpty(ListItem.Property(dropdown))</visible>

<property name="dropdown">not_empty</property>

Lol of course not, sorry for being unclear,
thanks i will try that,

I got another question,
i can't get this to work :

Code:
    <item id="31"><!-- Vpl 1 -->
    <label fallback="31072">$INFO[skin.string(vpl1.label)]</label>
    <label2 fallback="31107">$VAR[value_libraryvpl1]</label2>
    <icon fallback="special://skin/backgrounds/vplaylist.jpg">$VAR[value_mainmenubg_vpl1]</icon>
    <onclick>Control.IsVisible(21)</onclick>
    <visible>!IsEmpty(skin.string(vpl1.path))</visible>
    </item>

Code:
    <item id="21"><!-- Fav 1 -->
    <label fallback="31071">$INFO[skin.string(fav1.label)]</label>
    <label2>31106</label2>
    <icon fallback="special://skin/backgrounds/favourites.jpg">$VAR[value_mainmenubg_fav1]</icon>
    <onclick>$INFO[skin.string(fav1.path)]</onclick>
    <visible>false</visible>

Both are items in menu content, and when id 31 is clicked, id 21 should become visible
But nothing happens when i click it..
Am i doing it correctly?

Edit : knew it, the log says so
Code:
21:59:13 T:696   ERROR: Keymapping error: no such action 'control.isvisible(21)' defined

What's the correct way to do this then?
Reply
#7
I would do it the way MassIV mentioned, with a ListItem.Property. There is quite a few in the Home.xml of Confluence Custom Mod if you want to check them out.
Noli illegitimi carborundum


Reply
#8
Code:
Control.IsVisible(21)
is a condition not an action.
Reply
#9
(2013-04-30, 21:06)Mudislander Wrote: I would do it the way MassIV mentioned, with a ListItem.Property. There is quite a few in the Home.xml of Confluence Custom Mod if you want to check them out.

(2013-04-30, 23:05)Hitcher Wrote:
Code:
Control.IsVisible(21)
is a condition not an action.

Hmm i'm trying to understand this but i don't know where to start cos my background is not programming,
i'll try to break it down what i''ve got so far :

First, here's my goal :
Assuming we have 3 Menus, each has 5 alphabetical submenus

Code:
1.Click Menu 1, Menu 1 submenus expanded

Menu 1
> A - E
> F - J
> K -O
> P - T
> U - Z
Menu 2
Menu 3

2. Click Menu 2, Menu 1 Collapsed automatically, Menu 2 submenu expanded

Menu 1
Menu 2
> A - E
> F - J
> K -O
> P - T
> U - Z
Menu 3

The submenu should also have smaller fonts..

After breaking down Ace's skin for days,
It's composed like this

Home --> MenuV --> Menu_Content

MenuV has the list containers and the related controls for Menu_Content
while Menu_Content contains all the item id's and their tags..

I read Modded Confluence but a bit confused because the home layout is rather different with Ace,
Do you mind explaining which controls are similar with my situation?

So my conclusion so far, i have to use these controls

Listitem.property to have separate font size
SetItemProperty to change the visible condition of submenu (auto hide and unhide), and used with <onclick>?

Am i understanding this correctly so far?
Reply
#10
Quote:Listitem.property to have separate font size
yes

Quote:SetItemProperty to change the visible condition of submenu (auto hide and unhide), and used with <onclick>?
no


For what you just described. Main menu items with a sub menu have 3 <onclick> events.
Code:
<onclick>Skin.Setstring(SubMenu1,open)</onclick>
<onclick>Skin.Setstring(SubMenu2,)</onclick>
<onclick>Skin.Setstring(SubMenu3,)</onclick>

And it's sub menu items have visibility based on that.
Code:
<visible>!IsEmpty(skin.string(SubMenu1))</visible>

But, then one submenu will remain open because you can't close them by just focusing a non submenu item.
You need a grouplist for that.
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#11
(2013-05-02, 22:48)MassIV Wrote:
Quote:Listitem.property to have separate font size
yes

Quote:SetItemProperty to change the visible condition of submenu (auto hide and unhide), and used with <onclick>?
no


For what you just described. Main menu items with a sub menu have 3 <onclick> events.
Code:
<onclick>Skin.Setstring(SubMenu1,open)</onclick>
<onclick>Skin.Setstring(SubMenu2,)</onclick>
<onclick>Skin.Setstring(SubMenu3,)</onclick>

And it's sub menu items have visibility based on that.
Code:
<visible>!IsEmpty(skin.string(SubMenu1))</visible>

But, then one submenu will remain open because you can't close them by just focusing a non submenu item.
You need a grouplist for that.

Hmm.. i don't think i can use Submenu window for this..
You see, the dropdown animation requires the menu below it to slide down..

So when menu 1 is clicked, menu 2 will slide down to allow room for submenu 1..
(Same with other menus)

That's why i had to use main menu items..
So the idea is, Main menu + submenu is comprised of Main menu items
but the submenus are only visible when the corresponding menu is clicked

something like this :

Code:
<item id="1"><!-- Menu 1 -->
    <onclick>Sub menu 1 is visible</onclick>
    <onclick>Sub menu 2 is not visible</onclick>
    <onclick>Sub menu 3 is not visible</onclick>
    <visible>!IsEmpty(skin.string(Menu1.path))</visible>
    </item>

    <item id="2"><!-- Menu 2 -->
    <onclick>Sub menu 1 is not visible</onclick>
    <onclick>Sub menu 2 is visible</onclick>
    <onclick>Sub menu 3 is not visible</onclick>
    <visible>!IsEmpty(skin.string(Menu2.path))</visible>
    </item>

    <item id="3"><!-- Menu 3 -->
    <onclick>Sub menu 1 is not visible</onclick>
    <onclick>Sub menu 2 is not visible</onclick>
    <onclick>Sub menu 3 is visible</onclick>
    <visible>!IsEmpty(skin.string(Menu3.path))</visible>
    </item>

    <item id="4"><!-- SubMenu 1 A_E -->
    <onclick>ActivateWindow(path to submenu 1)</onclick>
    <visible>Menu 1 is clicked</visible>
    </item>

    <item id="5"><!-- SubMenu 1 F_J -->
    <onclick>ActivateWindow(path to submenu 1)</onclick>
    <visible>Menu 1 is clicked</visible>
    </item>

    <item id="6"><!-- SubMenu 1 K_O -->
    <onclick>ActivateWindow(path to submenu 1)</onclick>
    <visible>Menu 1 is clicked</visible>
    </item>

    <item id="7"><!-- SubMenu 1 P_T -->
    <onclick>ActivateWindow(path to submenu 1)</onclick>
    <visible>Menu 1 is clicked</visible>
    </item>

    <item id="8"><!-- SubMenu 1 U_Z -->
    <onclick>ActivateWindow(path to submenu 1)</onclick>
    <visible>Menu 1 is clicked</visible>
    </item>


    <item id="9"><!-- SubMenu 2 A_E -->
    <onclick>ActivateWindow(path to submenu 2)</onclick>
    <visible>Menu 2 is clicked</visible>
    </item>

    <item id="10"><!-- SubMenu 2 F_J -->
    <onclick>ActivateWindow(path to submenu 2)</onclick>
    <visible>Menu 2 is clicked</visible>
    </item>

    <item id="11"><!-- SubMenu 2 K_O -->
    <onclick>ActivateWindow(path to submenu 2)</onclick>
    <visible>Menu 2 is clicked</visible>
    </item>

    <item id="12"><!-- SubMenu 2 P_T -->
    <onclick>ActivateWindow(path to submenu 2)</onclick>
    <visible>Menu 2 is clicked</visible>
    </item>

    <item id="13"><!-- SubMenu 2 U_Z -->
    <onclick>ActivateWindow(path to submenu 2)</onclick>
    <visible>Menu 2 is clicked</visible>
    </item>

    <item id="14"><!-- SubMenu 3 A_E -->
    <onclick>ActivateWindow(path to submenu 3)</onclick>
    <visible>Menu 3 is clicked</visible>
    </item>

    <item id="15"><!-- SubMenu 3 F_J -->
    <onclick>ActivateWindow(path to submenu 3)</onclick>
    <visible>Menu 3 is clicked</visible>
    </item>

    <item id="16"><!-- SubMenu 3 K_O -->
    <onclick>ActivateWindow(path to submenu 3)</onclick>
    <visible>Menu 3 is clicked</visible>
    </item>

    <item id="17"><!-- SubMenu 3 P_T -->
    <onclick>ActivateWindow(path to submenu 3)</onclick>
    <visible>Menu 3 is clicked</visible>
    </item>

    <item id="18"><!-- SubMenu 3 U_Z -->
    <onclick>ActivateWindow(path to submenu 3)</onclick>
    <visible>Menu 3 is clicked</visible>
    </item>

If we use submenu window, then it will have to somehow change the position of the main window (sliding down),
and that's even more complicated for me lol

So the problem is.. I haven't found an example of Main menu items affecting each other in other skins..
Reply
#12
Yes, you misunderstand what i mean.

Code:
<item id="1"><!-- Menu 1 -->
    <onclick>Skin.Setstring(SubMenu1,open)</onclick>
    <onclick>Skin.Setstring(SubMenu2,)</onclick>
    <onclick>Skin.Setstring(SubMenu3,)</onclick>
</item>

<item id="2"><!-- submenu item -->
    <onclick>Open something</onclick>
    <visible>!IsEmpty(skin.string(SubMenu1))</visible>
</item>

<item id="3"><!-- submenu item -->
    <onclick>Open something</onclick>
    <visible>!IsEmpty(skin.string(SubMenu1))</visible>
</item>
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#13
(2013-05-03, 11:46)MassIV Wrote: Yes, you misunderstand what i mean.

Code:
<item id="1"><!-- Menu 1 -->
    <onclick>Skin.Setstring(SubMenu1,open)</onclick>
    <onclick>Skin.Setstring(SubMenu2,)</onclick>
    <onclick>Skin.Setstring(SubMenu3,)</onclick>
</item>

<item id="2"><!-- submenu item -->
    <onclick>Open something</onclick>
    <visible>!IsEmpty(skin.string(SubMenu1))</visible>
</item>

<item id="3"><!-- submenu item -->
    <onclick>Open something</onclick>
    <visible>!IsEmpty(skin.string(SubMenu1))</visible>
</item>

Edit : nevermind, i had to change it to "fav1" for my code Smile
It's opening properly now, now i just have to make it do an open close routine...
Reply
#14
Code:
<onclick condition="IsEmpty(skin.string(SubMenu1))">Skin.Setstring(SubMenu1,open)</onclick>
<onclick condition="!IsEmpty(skin.string(SubMenu1))">Skin.Setstring(SubMenu1,)</onclick>
Image [RELEASE] Metroid
Image [RELEASE] IrcChat
Reply
#15
(2013-05-03, 14:03)MassIV Wrote:
Code:
<onclick condition="IsEmpty(skin.string(SubMenu1))">Skin.Setstring(SubMenu1,open)</onclick>
<onclick condition="!IsEmpty(skin.string(SubMenu1))">Skin.Setstring(SubMenu1,)</onclick>

Thanks MassIV ! Big Grin
It's almost done
Now i'm gonna try changing the font
Reply

Logout Mark Read Team Forum Stats Members Help
Creating dropdown menu with auto collapse0