BullGuard Antivirus Sale - 60% Off with openElement !
Forum openElement Homepage
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: 11 Août 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: 11 Août 2019 at 14:00
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 4360
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 12 Août 2019 at 23:01
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: 11 Août 2019
Status: Offline
Points: 25
Post Options Post Options   Thanks (0) Thanks(0)   Quote Avinoam Quote  Post ReplyReply Direct Link To This Post Posted: 12 Août 2019 at 23:34
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: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 4360
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 13 Août 2019 at 03:26
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 - 13 Août 2019 at 03:27
Back to Top
Avinoam View Drop Down
Newbie
Newbie


Joined: 11 Août 2019
Status: Offline
Points: 25
Post Options Post Options   Thanks (1) Thanks(1)   Quote Avinoam Quote  Post ReplyReply Direct Link To This Post Posted: 17 Août 2019 at 22:43
Hi,

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

Joined: 05 Juin 2018
Location: Canada, Québec
Status: Offline
Points: 4360
Post Options Post Options   Thanks (0) Thanks(0)   Quote Hobby001 Quote  Post ReplyReply Direct Link To This Post Posted: 18 Août 2019 at 00:21
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 10.11
Copyright ©2001-2012 Web Wiz Ltd.

This page was generated in 0,031 seconds.