[DEV] Button menu

A place for Extension Authors to post and receive feedback on Extensions still in development. No Extensions within this forum should be used within a live environment!
Scam Warning
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

IMPORTANT: Extensions Development rules

IMPORTANT FOR NEEDED EVENTS!!!
If you need an event for your extension please read this for the steps to follow to request the event(s)
User avatar
Theriddler1
Registered User
Posts: 448
Joined: Sat Aug 27, 2011 11:00 pm
Location: NL
Name: Theriddler❶
Contact:

Re: [DEV] Button menu

Post by Theriddler1 » Sun Sep 24, 2017 6:45 am

A user here asked for the changed menu based on this menu that i use

Here it is with a hamburger menu for tablet and foon

download
Theriddler - Moderator @ phpBB.nl | phpBBservice.nl Team-member
ImageSupport Tools | Image My Extensions | buy me a beer Image

User avatar
dmzx
Registered User
Posts: 774
Joined: Fri Sep 05, 2014 6:48 am
Location: The Netherlands
Contact:

Re: [DEV] Button menu

Post by dmzx » Sun Sep 24, 2017 4:53 pm

Theriddler1 wrote:
Sun Sep 24, 2017 6:45 am
A user here asked for the changed menu based on this menu that i use

Here it is with a hamburger menu for tablet and foon

download
:?:
Contact me on dmzx-web.net
 Need a Host or buy me a beer Donate and try binance.com

fabiomaticus
Registered User
Posts: 128
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY
Contact:

Re: [DEV] Button menu

Post by fabiomaticus » Wed Oct 18, 2017 8:10 am

When RC?

User avatar
dmzx
Registered User
Posts: 774
Joined: Fri Sep 05, 2014 6:48 am
Location: The Netherlands
Contact:

Re: [DEV] Button menu

Post by dmzx » Fri Oct 20, 2017 7:34 am

fabiomaticus wrote:
Wed Oct 18, 2017 8:10 am
When RC?
When more time available ;)
Contact me on dmzx-web.net
 Need a Host or buy me a beer Donate and try binance.com

fabiomaticus
Registered User
Posts: 128
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY
Contact:

Re: [DEV] Button menu

Post by fabiomaticus » Sat Oct 28, 2017 1:53 pm

it's Great but is not mobile responsive.

fabiomaticus
Registered User
Posts: 128
Joined: Tue May 08, 2007 11:56 am
Location: Taranto - ITALY
Contact:

Re: [DEV] Button menu

Post by fabiomaticus » Sat Oct 28, 2017 3:08 pm

IHi don't fuction move button in ACP

Gumboots
Registered User
Posts: 46
Joined: Fri Oct 11, 2019 1:59 am

Re: [DEV] Button menu

Post by Gumboots » Sun Oct 13, 2019 12:49 am

This still works perfectly on 3.2.8, as far as basic functionality goes.

Only real drawbacks are a/ it doesn't fit that well with a range of styles and b/ not responsive.

I'm thinking I'll hack my copy to make it suit what I want. Ditch the colour variables and spans, and do all the styling with CSS additions to a handy sheet in each style. Probably also throw in a conversion to hamburger at <1024px wide, with a flexible height wrapper over that width (just in case it still wants to break to two lines). And some basic finishing touches like transitions on the drops, etc.

This can all be done with CSS. The javascript can go. That was only necessary for drops back in IE6 days.

User avatar
dmzx
Registered User
Posts: 774
Joined: Fri Sep 05, 2014 6:48 am
Location: The Netherlands
Contact:

Re: [DEV] Button menu

Post by dmzx » Sun Oct 13, 2019 12:42 pm

Gumboots wrote:
Sun Oct 13, 2019 12:49 am
This still works perfectly on 3.2.8, as far as basic functionality goes.

Only real drawbacks are a/ it doesn't fit that well with a range of styles and b/ not responsive.

I'm thinking I'll hack my copy to make it suit what I want. Ditch the colour variables and spans, and do all the styling with CSS additions to a handy sheet in each style. Probably also throw in a conversion to hamburger at <1024px wide, with a flexible height wrapper over that width (just in case it still wants to break to two lines). And some basic finishing touches like transitions on the drops, etc.

This can all be done with CSS. The javascript can go. That was only necessary for drops back in IE6 days.
If you have your code you can share or pm so we can take a look to add it. Or pull request on github.
Contact me on dmzx-web.net
 Need a Host or buy me a beer Donate and try binance.com

Gumboots
Registered User
Posts: 46
Joined: Fri Oct 11, 2019 1:59 am

Re: [DEV] Button menu

Post by Gumboots » Mon Oct 14, 2019 12:28 am

Haven't done any code yet, but you'll be welcome to take a look once I get around to it. It may not suit everyone though. It's generally pretty easy to write code for your own purposes. It's rather more complicated when you're trying write an extension to cover all bases, with every possible combination of style and newbie administrator. You'll invariably have to compromise on the presentation to some extent.

Gumboots
Registered User
Posts: 46
Joined: Fri Oct 11, 2019 1:59 am

Re: [DEV] Button menu

Post by Gumboots » Tue Oct 15, 2019 10:03 am

Played around with it. This is still a bit rough and ready, as I was just winging it in a hurry, but should give the general idea. I styled it up for Aero, just because we have Aero running anyway, but the same basic structure should work with anything else. We obviously have Prosilver too, although personally I don't like it much, so I'll sort out something for that too.

Learned something while doing this. The way phpBB handles this sort of customisation is cleverer than I expected. Ends up being a bit bloated in terms of number of files floating around, but is versatile and pretty much idiot-proof nonetheless. But, for your purposes you wouldn't be able to cater for a large range of styles to this degree. It'd end up bloating your extension beyond all reason, as I'm sure you're aware.

The good news is that the basics can be done in a more flexible manner than they currently are, and then if anyone wants to get persnickety about detailing for their favourite style it's just a simple "drop in some extra folders and tweak some CSS".

For this WIP I emptied overall_header_stylesheets_after. I hacked overall_header_navbar_before to this:

Code: Select all

<!-- IF .buttons -->
<div id="menu">
	<input type="checkbox" id="button_menu_checkbox" class="toggle_check" />
	<div class="inner">
		<label for="button_menu_checkbox" class="hamburger">Menu toggle</label>
		<ul>
		<!-- BEGIN buttons -->
			<li>
				<a href="{buttons.URL}"<!-- IF buttons.EXTERNAL --> target="_blank" rel="noopener"<!-- ENDIF -->>{buttons.NAME}</a>
				<!-- IF .buttons.sub -->
				<ul>
					<!-- BEGIN sub --><li><a href="{sub.URL}"<!-- IF sub.EXTERNAL --> target="_blank" rel="noopener"<!-- ENDIF -->>{sub.NAME}</a></li><!-- END sub -->
				</ul>
				<!-- ENDIF -->
			</li>
		<!-- END buttons -->
		</ul>
		<!-- IF S_DISPLAY_SEARCH and S_MENU_SEARCH -->
		<div id="top-search" style="<!-- IF S_MENU_ALIGN == 'right' -->float: left;<!-- ELSE -->float: right;<!-- ENDIF -->">
			<form action="{U_SEARCH}" method="post" id="search">
				<fieldset>
					<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="menu_search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
					{S_SEARCH_HIDDEN_FIELDS}
				</fieldset>
			</form>
		</div>
		<!-- ENDIF -->
	</div>
</div>
<!-- ENDIF -->
And buttonmenu.css is currently this:

Code: Select all

#menu {
	position: relative;
	margin: 1em 0;
	padding: 5px;
	background: none;
	border-radius: 7px;
	border: 1px solid;
	border-color: #394854 #212930 #263038 #3a4955;
	box-shadow: 1px 1px 8px #555;
}

#menu .inner {
/*	padding: 5px 9px 9px;*/
/*	color: #fff;*/
	font-size: 1.4em;
	line-height: 2em;
/*	background: #d9eaf1;*/
/*	border: 1px solid #566877;*/

	border: 1px solid;
	border-color: #394854 #212930 #263038 #3a4955;
	background: #0b0b0e url(images/header_black.png) 100% 0 no-repeat;
} 

#menu #top-search {
	position: absolute;
	top: 6px;
	right: 6px;
}

#menu .menu_search {
	width: 115px;
	padding: 4px 8px;
	background: #0008;
	color: #fff;
	font-size: 1em;
	line-height: 2em;
	border: 1px solid;
	border-width: 0 0 0 1px;
	border-color: #fff8;
}

#menu>.inner>ul {
	list-style: none;
	margin: 0 134px 0 0;
	padding: 0 4px;
}

#menu>.inner>ul>li {
	display: inline-block;
	position: relative;
	padding: 4px 0;
}

#menu a {
	display: block;
	padding: 0 8px;
	color: #fff;
	text-shadow: 0 0 1px #000;
	white-space: nowrap;
}
#menu>.inner>ul>li>a {
	border: 1px solid #0000;
	border-radius: 4px;
}
#menu>.inner>ul>li:hover>a, #menu>.inner>ul>li>a:hover {
	background: #0b0b0e url(images/header_black.png) 100% 50% no-repeat;
	border-color: #999;
}

#menu ul ul {
	position: absolute;
	top: 100%;
	left: -120vw;
	z-index: 4;
	background: #21212a;
	padding: 4px 0 8px;
	list-style: none;
	border: 1px solid;
	border-color: #394854 #212930 #263038 #3a4955;
	border: 3px solid;
	border-color: #aaa;
	border-radius: 0 8px;
	box-shadow: 1px 2px 3px #000a;
	opacity: .7;
	transition: all .1ms step-end .3s, opacity .3s linear;
}

#menu li:hover ul {
	left: 0;
	opacity: 1;
	transition: left .1ms step-end .1s;
}

#menu ul ul li {
	min-width: 150px;
	margin: 4px 0;
}

#menu ul ul li a {
	border: solid #0000;
	border-width: 2px 0;
	text-shadow: 0 0 1px #000;
}

#menu ul ul li a:hover {
	background: #0b0b0e url(images/header_black.png) 50% 50% no-repeat;
	border-color: #999;
}

/* Tricky stuff. */
.toggle_check, .hamburger {
	display: none;
}

/* 896px at standard browser settings. */
@media screen and (max-width: 56em) {
	.toggle_check {
		display: block;
		position: absolute;
		left: -50vw;
	}
	.hamburger {
		display: block;
		width: 36px;
		height: 6px;
		margin: 8px 4px;
		padding: 4px 0;
		overflow: hidden;
		white-space: nowrap;
		border: solid #ccc;
		border-width: 5px 0;
		border-radius: 2px;
	}
	.hamburger::before {
		display: block;
		content: "";
		border-top: 6px solid #ccc;
	}
	#menu>.inner>ul {
		display: none;
	margin: 0;
	}
	#menu>.inner>ul>li {
		display: block;
		max-width: 280px;
	}
	#menu>.toggle_check:checked + .inner>ul {
		display: block;
	}
	#menu li:hover ul {
		left: 100px;
	}
}


/* Not sure about this crap yet. */
.headerbar #search-box {
	display: none !important;
}

.navbar #search-box{
	box-shadow:none;
}
For this stunt the buttonmenu/styles/prosilver directory was copied, and the copy renamed to buttonmenu/styles/aero before going nuts with the chainsaw. I don't know if that's the approved phpBB procedure, but it works. Screenshots attached.

Big_screen.jpg
Medium_screen.jpg
Small_screen.jpg

Post Reply

Return to “Extensions in Development”