Menu Concept
This code is purely modal specific:
It was just some reorganization, I fixed it inthe CSS.
[s]__[/s][block=notifi]
[s]___[/s][block=speachbox][url=]×[/url] [url=]You have a new profile message by Meticulous Mulia! [/url][img]https://chibidoll.com/img/item.php?layer=ears&id=ran_mule_flaxen[/img][/block]
[s]__[/s][/block]
___
[s]__[/s][block=top_r loggedout]
[s]___[/s]
[s]__[/s][/block]
[s]__[/s][block=top_r signing]
[s]___[/s]
[s]__[/s][/block]
__
[s]___[/s][block=nav]
[s]____[/s][list][url=]Avatar[/url]
[s]____[/s][url=]Chat (3)[/url]
[s]____[/s][url=]Community[/url]
[s]____[/s][url=]Oekaki[/url]
[s]____[/s][url=]Games[/url]
[s]____[/s][url=]Items[/url][/list]
[s]___[/s][/block]
___
[s]___[/s][block=nav-mobile]
[s]____[/s][list][url=]👤[/url]
[s]____[/s][url=]💬[/url][s][b]3[/b][/s]
[s]____[/s][url=]🏛️[/url]
[s]____[/s][url=]🎨[/url]
[s]____[/s][url=]🏆[/url]
[s]____[/s][url=]🧺[/url][/list]
[s]___[/s][/block]
It was just some reorganization, I fixed it inthe CSS.
/* Login Modal */
/* Make the Overlay */
#login_expanded {
position: fixed;
z-index: 5;
inset: 0; /* Shorthand for top, right, bottom, and left */
width: 100%;
height: 100%;
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
backdrop-filter: blur(7px); /* Makes everything behind the overlay blurry to help focus on the login area. */
}
/* Center the Login Form */
#login {
background-color: teal;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1rem;
}
/* Some Cleanup Code */
#login_expanded {
margin-top: -8px; /* Current */
margin-top: 0; /* So the overlay will display properly. */
}
.bubble_tail {
z-index: 50; /* Current is too high */
z-index: 1; /* Default is 0, so 1 is enough */
}
/* Make the Overlay */
#login_expanded {
position: fixed;
z-index: 5;
inset: 0; /* Shorthand for top, right, bottom, and left */
width: 100%;
height: 100%;
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
backdrop-filter: blur(7px); /* Makes everything behind the overlay blurry to help focus on the login area. */
}
/* Center the Login Form */
#login {
background-color: teal;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 1rem;
}
/* Some Cleanup Code */
#login_expanded {
margin-top: -8px; /* Current */
margin-top: 0; /* So the overlay will display properly. */
}
.bubble_tail {
z-index: 50; /* Current is too high */
z-index: 1; /* Default is 0, so 1 is enough */
}
Key Considerations
I would like you to edit this list as you see fit.
- Fixed height and width for the login area
- Current "logo" is just a place holder
Components
- Header
- Logo link
- Nav Menu
- #top_right (3 stages)
- Logged out
- Logging in
- Logged in (avatar/logout)
- Notification Speech Bubble
BBC Handicaps
Added br'sMacGyver solution in CSS- I can only add one id to a block
- This may be because you've told it to use id's
- Potentially making blocks create a class instead would solve that
- I can't add pre-existing classes or id's, like pixel-art, to a block
- Inputs like checkboxes and text feilds would need to be recreated
Wide
Narrow
[s]__[/s][block=notifi]
[s]___[/s][block=speachbox][url=]×[/url] [url=]You have a new profile message by Meticulous Mulia! [/url][img]https://chibidoll.com/img/item.php?layer=ears&id=ran_mule_flaxen[/img][/block]
[s]__[/s][/block]
___
[s]__[/s][block=top_r loggedout]
[s]___[/s]
[s]__[/s][/block]
[s]__[/s][block=top_r signing]
[s]___[/s]
[s]__[/s][/block]
__
[s]___[/s][block=nav]
[s]____[/s][list][url=]Avatar[/url]
[s]____[/s][url=]Chat (3)[/url]
[s]____[/s][url=]Community[/url]
[s]____[/s][url=]Oekaki[/url]
[s]____[/s][url=]Games[/url]
[s]____[/s][url=]Items[/url][/list]
[s]___[/s][/block]
___
[s]___[/s][block=nav-mobile]
[s]____[/s][list][url=]👤[/url]
[s]____[/s][url=]💬[/url][s][b]3[/b][/s]
[s]____[/s][url=]🏛️[/url]
[s]____[/s][url=]🎨[/url]
[s]____[/s][url=]🏆[/url]
[s]____[/s][url=]🧺[/url][/list]
[s]___[/s][/block]
Title:Menu Concept
Last changed:December 3, 2025 by Ookami Kenran
Author(s):Ookami Kenran, Karin
Page views:35
Visible to:anyone
Can be edited by:authors only
Maybe if I give the html to chatgpt it can turn it into proper bbcode, want me to try? In case of login form that might not be a bad idea. But in case of the menu bar maybe you could try working with the existing header html.
Maybe we should also work more with animations and stuff, don't know how far we can get with pure css.
My avi is in place for the #top_right (which also contains the login area), and I saved room for the login area. I made it a fixed width, because as I mentioned before, I want to avoid movement in the page. (I'm not sure how to explain it...) Hopefully I'm explaining what you are looking at, but you are welcome to look at my CSS here, that will hopefully help as well.
You are certainly welcome to try.
In my learning-to-be-programmer, I've been working on learning how to utilize AI; if your IDE has AI, then it could give you some good ideas about how to redo the login area.
I don't have full access to the HTML, I'm just coping from the dev tools. I've made a simplified version for this BBC.
I can certainly add animation, I've worked with it before (see PS for side-track), I just haven't fooled with animating anything here yet because it kinda turns into a rabbit hole for me. However, if you have an idea of what you want, I can make it happen.
How do you mean? What would we not be able to do with CSS? I think at most, we would just have to reorganize the HTML--even if you want a bigger overhaul. On this project, I assumed you didn't want to change much, so that was one of my main considerations, but if you want something deeper, between us (including the others and AI), we can think of something good looking and functional.
PS: for the animation I made, I animated sprite art, a flappy pigeon, and then made it "fly" across the div~ It was fun to make, but it ended up not getting used. I've also done simpler, transition animations, no problem.