Bottom Menus(3) with Transparent and expandable layered appearance with and hidden effect towards right on "closing click"


1.Would like to have two to three transparent, expandable bottom menus (or pages or full width popups) something similar to following bottom menu design with additional functionality as mentioned in point two.

Please observe at the bottom following pages for Expandable pages/menus at bottom - Design reference 1 or Design reference 2 second reference is not transparent one, just for design ideas purpose.
2. Once we click close icon (x or V or -), the menu is going back to bottom/original position as per above referenced pages…But it should not go to bottom/original position it
**** should go to RIGHT side button and hide as Menu1
* or Page1 button** similar to following page when we close the chat app.
The closing effect should be something similar to following** page…**

Try to type a question in chat at bottom right and close (click close - (minus) icon)…the chat window was hiding towards right with a button at right. If we click on that button at right it is expanding. **

Refresh the page, again chart window is appearing again** with no appearance of button at rightside after refresh
3. Once we click close icon (x or V) of first bottom menu/page, it should also bring second menu/page at the bottom ready to be viewed at bottom apart from doing above point (hiding first menu to the right).
4. As soon as we click click con (x or V) second bottom menu/page It should iterate functionality of point 3 to hide but with “menu/page 2 button”(instead of “menu/page 1 button”) at right side adjustment to vertical bar where it will hide.If we click that button, menu should open again.

5 Iterate same for one more bottom menu/page 3.

I am a beginner/not an expert and seeking your help if those effects & menus can be implemented in the attached page (index) with lorem ipusm/any sample menu content.

First lets reproduce the bottom menu designs similar to referred pages(preferably reference 1) then lets focus on hiding effect on closing click. I have attached sample page on which I request you to experiment and find solution.Thanks!

Sample page when we can experiment (8.5 KB)

Attaching a sample page where we can experiment/implement on. Seeking your help on creating bottom menus with lorem ipsum similar to referred pages and with hiding effect as mentioned in the topic above.Thanks

Let us give a try to reproduce bottom menus with lorem ipsum as per Design reference 1 post which we can think on hiding effect on closing click of bottom menu similar following page’s chat app Please use this advanced(attached) page for your experiments/implements - page courtesy & developed by @coothead
Page to implement experiment Bottom Menus 3 with Transparent and expandable layered appearance with and hidden effect towards right on closing (156.1 KB)

Hi there vpkhihuk,

this link of yours…

following page’s

…presents a totally blank page to a visitor
who happens to have “JavaScript” disabled. :wonky:

Further reading

WebAIM - Accessible Javascript

As you can imagine, it is therefore a perfect example
of how not to build a web page. :winky:

Note, though, that I will take a look at your latest
problem in the fullness of time. :sunglasses:


1 Like

Wow. Thank you somuch @coothead Agreed! Thanks for blessing this feature with your hand coothead I am again honored to have you hack here! I trust that is the major drawback of Javascript. To make this feature NASCENT & INNOVATIVE :smile , it would be good to have hiding effect(for multiple(say 3 menus) layered appearing bottom menus) on closing click on bottom menus if it is possible from any other means, if the Javascripts has this drawback wrt browser setting.Or lets use Javascript to benefits users who has already enabled script. Now I got your point and based on which, importance weightage of the content I should consider before considering Javascript for any features.

I really liked the way the chatbox at bottom of that page is getting hide towards right button on closing click (minus icon). When we click on that right side button the chat box again comes.When we refresh the entire page, right side button gets disappeared.

If you didn’t like this hiding functionality lets use whatever the other way that you think suites appropriately otherwise even we can ignore this hiding stuff to bring the bottom menus back to original positions.Thanks again @coothead :slight_smile: Good day to you there!

Hi there vpkhihuk,

the following lines penned by our esteemed but, unfortunately,
recently deceased member @felgall may be of interest to you.

Progressive enhancement:

[]You write your page content as if both CSS and JavaScript are off.
]You write CSS to style the page the way you want it to look when JavaScript is off.
[]You write additional CSS to change the way you want the page to look when JavaScript is turned on.
]You write CSS for the way you want the page to look when specific JavaScript commands are supported by the browser.
[*]You add a few lines of JavaScript to the head of the page to add the necessary classes to the html tag for the styles you wrote in steps 3 and 4 to be applied.

If these instructions are adhered to then your pages will not have any
accessibility issues. :winky:



This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.