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
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 Topic: How to use Collapsible Panel as a drop down menu?
    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
Hobby001 View Drop Down
Admin Group
Admin Group
Avatar

Joined: Jun 05 2018
Location: Canada, Québec
Status: Offline
Points: 6195
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 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: 6195
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 (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: 6195
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: Aug 17 2019 at 11:21pm
Thanks for the feedback.  It's allways appreciated
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.