My drop down menu. Want to see what you guys think.

For support and discussion related to templates, themes, and imagesets in phpBB 3.0.
Anti-Spam Guide
Locked
Novack
Registered User
Posts: 41
Joined: Sun Feb 05, 2012 10:26 pm

My drop down menu. Want to see what you guys think.

Post by Novack » Sun Mar 11, 2012 7:04 pm

Past few days I been hacking away on phpBB 3.0.10 and my theme to get a drop down menu to work. This isn't a mod. No Jquery is used, it's CSS based.

I spent the past two months building an online community on my local dev machine. My theme is based on prosilver. Any not here to talk about the theme, but the drop down menu and what you guys think and what I can improve on it. I tried to keep it as simple and easy to use as I can. The drop down menu coding isn't all my coding. So I can not take all credit for it.

Pages dropped down.
pages_dd.png
pages_dd.png (10.59 KiB) Viewed 481 times
User Menu dropped down
usermenu_dd.png
usermenu_dd.png (8.59 KiB) Viewed 481 times
When not logged in, the User Menu is replaced with the Register link and the Pages drop down menu doesn't display the Members link.
logedout_dd.png
logedout_dd.png (10.36 KiB) Viewed 481 times
So what do you all think?

Forgot to add that the icons are the Silk Icons
http://www.famfamfam.com/lab/icons/silk/
http://system512.com/ An online community for geeks, gamers, and anime fans.

~TylerW~
Registered User
Posts: 54
Joined: Tue Jul 12, 2011 10:12 pm
Contact:

Re: My drop down menu. Want to see what you guys think.

Post by ~TylerW~ » Sun Mar 11, 2012 7:41 pm

I like it! Keep up the good work! I have seen another community do the same with their style that they were using as well and it came along nicely.
~TylerW~

Come and join my fish forum!
Tropical Aquaria

User avatar
Christian 2.0
Former Team Member
Posts: 4509
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: My drop down menu. Want to see what you guys think.

Post by Christian 2.0 » Sun Mar 11, 2012 11:19 pm

Nice and simple. The red hover state could do with being white, or a light blue.

Rounded corners in the bottom left and bottom-right of the drop down would be cool as well. :)

Novack
Registered User
Posts: 41
Joined: Sun Feb 05, 2012 10:26 pm

Re: My drop down menu. Want to see what you guys think.

Post by Novack » Wed Mar 14, 2012 12:48 am

Well, I decided not to use this dropdown navbar for my forums. I might later on, but for now I don't have a need for it.

So I'm going to share the coding for how I did it. This works with the prosilver theme. I'm not going to offer any support for it. What you do with it is up to you. There are some links in it for some custom pages that I have. You can take them out.

HTML/PHP Coding

Code: Select all

<div class="navbar">
<div class="inner"><span class="corners-top"><span></span></span>
	<ul class="ddnav">
		<li class="dicon-sitemap">
			<a>Fourm Pages</a>
			<ul>
				<li class="dicon-faq"><a href="{U_FAQ}" title="{L_FAQ_EXPLAIN}">{L_FAQ}</a></li>
				<li class="dicon-search"><a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH}</a></li>
				<!-- IF S_DISPLAY_MEMBERLIST --><li class="dicon-members"><a href="{U_MEMBERLIST}" title="{L_MEMBERLIST_EXPLAIN}">{L_MEMBERLIST}</a></li><!-- ENDIF -->
				<li class="dicon-contact"><a href="contact.php">Contact</a></li>
				<li class="dicon-ad"><a href="advertise.php">Advertising</a></li>
				<li class="dicon-about"><a href="about.php">About</a></li>
			</ul>
		</li>
		<!-- IF not S_USER_LOGGED_IN and S_REGISTER_ENABLED and not (S_SHOW_COPPA or S_REGISTRATION) --><li class="dicon-register"><a href="{U_REGISTER}">{L_REGISTER}</a></li><!-- ENDIF -->
		<!-- IF not S_IS_BOT and S_USER_LOGGED_IN -->
		<li class="dicon-ucp">
			<a>User Menu</a>
			<ul>
				<li class="dicon-ucp"><a href="{U_PROFILE}" title="{L_PROFILE}" accesskey="e">{L_PROFILE}</a></li>
				<li><!-- IF S_DISPLAY_PM --><a href="{U_PRIVATEMSGS}">{PRIVATE_MESSAGE_INFO}</a><!-- ENDIF --></li>
				<li><!-- IF S_DISPLAY_SEARCH --> <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><!-- ENDIF --></li>
					<!-- IF U_RESTORE_PERMISSIONS --> &bull;
					<a href="{U_RESTORE_PERMISSIONS}">{L_RESTORE_PERMISSIONS}</a>
					<!-- ENDIF -->
			</ul>
		</li>
		<!-- ENDIF -->
	</ul>
	<ul class="linklist rightside">
		<li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
	</ul>
<span class="corners-bottom"><span></span></span></div>
</div>
CSS Coding

Code: Select all

ul.ddnav{
	font-size: 1.1em;
	list-style:none;
	/* Clear floats */
	float:left;
	/* Bring the ddnav above everything else--uncomment if needed.
	position:relative;
	z-index:5;
	*/
}
ul.ddnav li{
	float:left;
	position:relative;
}
ul.ddnav a{
	display:block;
	padding:5px;
	color:#fff;
	text-decoration:none;
}
ul.ddnav a:hover{
	color: #db1141;
	text-decoration:underline;
}

/*--- DROPDOWN ---*/
ul.ddnav ul{
	background:#3b627e; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
	padding-left: 5px;
}
ul.ddnav ul li{
	float:none;
}
ul.ddnav ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
ul.ddnav li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
ul.ddnav li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	text-decoration:underline;
}
ul.ddnav li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}

.dicon-faq, .dicon-search, .dicon-ucp, .dicon-sitemap, .dicon-logout, .dicon-members, .dicon-register, .dicon-ad, .dicon-contact, .dicon-about {
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-image: none;
	padding: 1px 0 0 12px;
}

.rtl .dicon-faq, .rtl .dicon-search, .rtl .dicon-ucp, .rtl .dicon-sitemap, .rtl .dicon-logout, .rtl .dicon-members, .rtl .dicon-register, .rtl .dicon-ad, .rtl .dicon-contact, .rtl .icon-adout {
	background-position: 100% 50%;
	padding: 1px 17px 0 0;
}

.dicon-faq						{ background-image: url("{T_THEME_PATH}/images/icon_faq.gif"); }
.dicon-members					{ background-image: url("{T_THEME_PATH}/images/icon_members.gif"); }
.dicon-home						{ background-image: url("{T_THEME_PATH}/images/icon_home.gif"); }
.dicon-ucp						{ background-image: url("{T_THEME_PATH}/images/icon_ucp.gif"); }
.dicon-register					{ background-image: url("{T_THEME_PATH}/images/icon_register.gif"); }
.dicon-logout					{ background-image: url("{T_THEME_PATH}/images/icon_logout.gif"); }
.dicon-pages						{ background-image: url("{T_THEME_PATH}/images/icon_pages.gif"); }
.dicon-search					{ background-image: url("{T_THEME_PATH}/images/icon_search.gif"); }
.dicon-about					{ background-image: url("{T_THEME_PATH}/images/icon_about.gif"); }
.dicon-ad					{ background-image: url("{T_THEME_PATH}/images/icon_ad.gif"); }
.dicon-contact					{ background-image: url("{T_THEME_PATH}/images/icon_contact.gif"); }
.dicon-sitemap					{ background-image: url("{T_THEME_PATH}/images/icon_sitemap.gif"); }
http://system512.com/ An online community for geeks, gamers, and anime fans.

drjumba
Registered User
Posts: 280
Joined: Tue Feb 14, 2012 11:29 am

Re: My drop down menu. Want to see what you guys think.

Post by drjumba » Wed Mar 14, 2012 2:36 pm

Thanks for being a giver like i always say its love that anable people like you to do things like this. and it being free, love spells it all.

Novack
Registered User
Posts: 41
Joined: Sun Feb 05, 2012 10:26 pm

Re: My drop down menu. Want to see what you guys think.

Post by Novack » Thu Mar 15, 2012 2:38 pm

Some information about the drop down navbar.

The dicon-"name" is used instead of icon-"name" due to the padding. I had to change the padding a bit to make the icons look right.

As stated before, I left links in the HTML/PHP to custom pages I made. These are contact.php, advertise.php, and about.php. You will need to take these out or replace them with your own custom pages. (In the KB there is a guide on how to make custom pages. http://www.phpbb.com/kb/article/add-a-n ... -to-phpbb/)

Icons are the Silk Icons. The link is listed in the first post.

In the HTML/PHP,

Code: Select all

   
<ul class="linklist rightside">
      <li class="icon-logout"><a href="{U_LOGIN_LOGOUT}" title="{L_LOGIN_LOGOUT}" accesskey="x">{L_LOGIN_LOGOUT}</a></li>
   </ul>
This part makes the login/logout on the rightside of the navbar which isn't shown in the images above. It also uses the normal icon-"name" instead of the dicon-"name. I used icon-"name" instead of dicon-:name" because of the ul class="linklist rightside".
http://system512.com/ An online community for geeks, gamers, and anime fans.

Locked

Return to “[3.0.x] Styles Support & Discussion”