I am looking to create a partially collapsing drawer panel based on Google Polymer v1.0. An example can be drawn from the popular AdminLTE website theme found here: https://almsaeedstudio.com/preview
In this demo, when the hamburger button is pressed, the sidebar collapses to only show the menu item icons.
Has anyone already done this? Or can you think of how to easily modify the paper-drawer-panel to do this?
CSS classes? set in the on-tap handler of the hamburger menu.
Related
I'm developing a website (Front-End: Bootstrap5, Back-End: PHP/MySQL).
I'm currently on the task of designing the Admin Interface.
So, I've retrieved an Admin Panel template from Bootstrap.
But I've tried to customize the side-nav menu with dropdown nested accordions when some of the dropdowns buttons opened all buttons at the same time.
I understand much of the code in the Admin Panel template.
But I just want the nested accordions to behave like a single-dropdown accordion when a button is cliked in the side-nav.
Thanks for the help
I'm trying to implement a slider feature whenever a user slides the page in ionic application. To elaborate, when I swipe the slider the segment button does highlights but the remaining segment buttons are hidden where I have to swipe the slider manually. Is there any way to make the whole segment slide as when I swipe the content?
I found the solution by using angular animation and translating the segment component horizontally. How you are going to use animation depends upon you.
I was wondering if there were any online resources to creating a fullscreen modal without using Bootstrap. I'd like to learn how to implement this myself. The full effect would be a scrollable overlay for a projects section so if the user wants to view more of a project they can click on the image and a fullscreen box overlays the current page with the ability to close when done.
I think, this animatedModal will handle it.
http://joaopereirawd.github.io/animatedModal.js/
I am using core-scaffold, and in general it works nicely (mainly). When I drag the window smaller (desktop), the drawer hides and the hamburger menu button appears and is functional. However, when I select an item in the menu/drawer, the drawer does not retract. Viewing my webpage on a phone is not satisfactory. But it does update the content correctly.
Is there some CSS that I should add?
I have tried importing core-animation, core-transition-pages which make no difference. A bit naive I think!
It can be seen on my (draft) webpage acsumama.com
thanks
Steve
I have tried the website that you reference acsumama.com, and adding the following onclick event in the menu link works
hope it helps.
I create the Application Bar with 4 icon Buttons and 3 normal menus. It's working fine.
But i don't want, the circle around the icon button. How can i remove that.
And another one question is how to see the icon button text in normally. That means i click the more icon that time icon button visible. But i want no using more button and want to see the icon button text. It's Possible.
Please Help Me.Thanks In Advance.
you cannot remove the circle, neither you can "expand" the application bar so you can see the labels of each button. It is simply against the Windows Phone UI.
But as it is .NET, you can easily create your own buttons bar at the bottom of your page. Of course, it might be difficult to implement the UI logic for you menu items so they behave like the native application bar does (you could consider using the build-in application bar for you menu items and set its mode to "Minimized").
But: why would you do all this? In my opinion, apps should follow all UI guidelines and should all look the same (especially when compared to native apps) ;-)
Greetings