BullGuard Antivirus Sale - 60% Off with openElement !
Forum Home Forum Home >

openElement

> openElement General Discussion
  New Posts New Posts RSS Feed - How to use Collapsible Panel as a drop down menu?
  FAQ FAQ  Forum Search   Register Register  Login Login

How to use Collapsible Panel as a drop down menu?

 Post Reply Post Reply
Author
Message Reverse Sort Order
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Topic: How to use Collapsible Panel as a drop down menu?
    Posted: Aug 17 2019 at 11:21pm
Thanks for the feedback.  It's allways appreciated
Back to Top
Avinoam View Drop Down
Newbie
Newbie


Joined: Aug 11 2019
Status: Offline
Points: 25
Post Options Post Options   Thanks (1) Thanks(1)   Quote Avinoam Quote  Post ReplyReply Direct Link To This Post Posted: Aug 17 2019 at 9:43pm
Hi,

Thank you so much. This was very helpful.
Thanks!
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Aug 13 2019 at 2:26am
Put all the controls into a group of elements A with a negative left margin equivalent to it's width and a custom class named slide

Put group of elements A in a second group of elements B with overflow hidden with and custom class slideBox

CSS code:

.slide{
margin-left:-350px; /* 350px being the width of group A*/
transition: all 1s;
}

.slideBox:hover .slide{
margin-left:0;
}




Edited by Hobby001 - Aug 13 2019 at 2:27am
Back to Top
Avinoam View Drop Down
Newbie
Newbie


Joined: Aug 11 2019
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote Avinoam Quote  Post ReplyReply Direct Link To This Post Posted: Aug 12 2019 at 10:34pm
I have some experience with both. I have no need for a mobile version. thx.
Thanks!
Back to Top
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6194
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Aug 12 2019 at 10:01pm
Hi,

Questions: 

What is your level of comfort with javascript and CSS?

How do you plan to use the collapsible pannel on a mobile device where no mouse is available?







Back to Top
Avinoam View Drop Down
Newbie
Newbie


Joined: Aug 11 2019
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote Avinoam Quote  Post ReplyReply Direct Link To This Post Posted: Aug 11 2019 at 1:00pm
Hi,

I am a newbie to openElement, I am trying to figure it out. I want to use Collapsible Panel as a dropdown menu panel (I don't want to use the popup panel). My questions are:

1. How do I replace the black image with the drop with some text or at least another image.
2. How can I cause the panel to collapse back when mouse is not over it - without having to press the header image?

Thanks,
Avi
Thanks!
Back to Top
 Post Reply Post Reply
  Share Topic   

Forum Jump Forum Permissions View Drop Down

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

This page was generated in 0.047 seconds.