Search jQuery

jQuery Forum

Nice select menus with icons instead of a navbar?

in jQuery Mobile • 11 years ago

I'm running out of space on my navbar.

I was thinking of maybe keeping a few main items on the navbar and moving everything else to a select menu that opens up from the navbar. Some nice bubble or something, with icons, that opens up on top of the current page and can be dismissed naturally.

Are there recommended techniques or examples of this?

Thanks,

doug

Replies(6)

arschmitz

Re: Nice select menus with icons instead of a navbar?

11 years ago

I use dialogs with out a header or footer that i have slide down from the top. within these i place buttons for each sub item.

douglerner

Re: Nice select menus with icons instead of a navbar?

11 years ago

I did try that also, but the slide effect doesn't look that great (at least on the Android) and it's not "connected" to the top or bottom.

For each sub-item, why do you use a button instead of a select list? Does it look better? Is it easier to use with custom icons?

Thanks,

doug

arschmitz

Re: Nice select menus with icons instead of a navbar?

11 years ago

To be honest there is no real reason I chose buttons aside from that it was the first option that came to mind also I adopted this approach prior to vs 1 when dialogs with no header or footer were attached to the top like a slide down. I'm not a big fan of the new dialogs but they are reviving a rewrite currently for the next version adding a pop up as well. I made the choice to just have the dialog with a large list of full width buttons to make it simple and easy to understand. But also non of my sub menus have more then 6 items.

douglerner

Re: Nice select menus with icons instead of a navbar?

11 years ago

Do your buttons include icons?

Thanks,

doug

arschmitz

Re: Nice select menus with icons instead of a navbar?

11 years ago

They do but just the jqm right arrow icon

santscho

Re: Nice select menus with icons instead of a navbar?

11 years ago

I've created a pure icon navigation solution...

http://www.uw3some.com/guide/index.php?adex-guide

The icon html:

<div class="main-menu-wrapper">
<div class="icon-wrapper"> <a href="index.php?mbs-shopper"><img src="../content/images/6f0d454cb16f2771d2f519b8614e2bf9.png" border="0" width="40" height="40" alt="" /></a> </div>
Shopper
</div>

The icon CSS:

.main-menu-wrapper{
	padding: 13px;    
	float: left;
	text-align: center;
	opacity: 1;
	font-size: 0.8em;
	color: white;
}


.icon-wrapper img:hover
 {
		background: #cb60b3;
background: -moz-linear-gradient(top,  #cb60b3 0%, #c146a1 50%, #a80077 51%, #db36a4 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cb60b3), color-stop(50%,#c146a1), color-stop(51%,#a80077), color-stop(100%,#db36a4));
background: -webkit-linear-gradient(top,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
background: -o-linear-gradient(top,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
background: -ms-linear-gradient(top,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
background: linear-gradient(top,  #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#db36a4',GradientType=0 );

}

.icon-wrapper img, .icon-wrapper img:visited, .icon-wrapper img:focus, .icon-wrapper img:active
 {
	border-radius: 14px;
	-moz-border-radius: 14px;
	-webkit-border-radius: 14px;
	border: 1px solid #6d8000;
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	padding: 15px;
background: #ebf1f6;
background: -moz-linear-gradient(top,  #ebf1f6 0%, #abd3ee 50%, #89c3eb 51%, #d5ebfb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ebf1f6), color-stop(50%,#abd3ee), color-stop(51%,#89c3eb), color-stop(100%,#d5ebfb));
background: -webkit-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
background: -o-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
background: -ms-linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
background: linear-gradient(top,  #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ebf1f6', endColorstr='#d5ebfb',GradientType=0 );


}

Top Reply

Response title

Attachments

jQuery Forum

Nice select menus with icons instead of a navbar?

Replies(6)

Re: Nice select menus with icons instead of a navbar?

Re: Nice select menus with icons instead of a navbar?

Re: Nice select menus with icons instead of a navbar?

Re: Nice select menus with icons instead of a navbar?

Re: Nice select menus with icons instead of a navbar?

Re: Nice select menus with icons instead of a navbar?

Statistics

Tags

Actions