Creating Navbar to Test Responsive Site

Asked

Viewed 326 times

2

Hello, I find this question strange to explain, but I will try my best not to take negative vote haha, come on.

Situation: I have a website, in it I present other website templates, I would like to apply a navbar, with my logo, some buttons that go back to the site and 3 icons, mobile, tablet and desktop, so that change the screen resolution and easy to test responsive version.

In case you don’t understand, before you negative, please comment here and I try to explain better.

In short: I need to create a fixed navbar at the top of the page to view templates responsibly

There’s an example I could show you Themeforest, that navbar they use in the demo of a Theme.

2 answers

3

-2


For whoever was or is looking for the same as me, here’s the solution:

Chewed side menu code, for testing responsive website and templates.

function set_frame_height(){
	var head_h = $('#header').outerHeight();

	//var h = 0;
	var win_h = $(window).height();
	var h = 0;

	// tablet
	if( $('body').hasClass('tablet') ) {
		var h_top = 62;
		var h_max = 781;
	} else if( $('body').hasClass('mobile') ) {
		var h_top = 72;
		var h_max = 504;
	}

	h = win_h - h_top;
	h = h > h_max ? h_max : h;	

	if( !$('body').hasClass('tablet') && !$('body').hasClass('mobile') ) {
		h = win_h;
	}
	
	$('#frame').height( h );
}
function change_template(src){
	var start_x = 50;
	var end_x = 180;
	$('#loading').show().stop(true, true).animate({'left' : end_x}, function(){
		$('#frame').attr('src', src);
	});
	$('#frame').load(function(){
		$('#loading').animate({ 'left' : start_x });
	});
}

$(document).ready(function(){

	var hide_button = $('<span id="hide-button"></span>').appendTo("#customize");
	var loading = $('<div id="loading"><span>Loading...</span></div>').appendTo('#customize');
	var is_mobile_template = $('body').hasClass('mobile');

	set_frame_height();
	$(window).resize(function(){ set_frame_height(); });
	
	$('.colors ol li a').click(function(){
		$(this).parent().parent().find('a').removeClass('active');
		$(this).addClass('active');
		
		change_template($(this).attr('href'));
		return false;
	});
	$('a.color').click(function(){
		var last_ol = $('.colors > ul > li.active ol');
		$('.colors > ul > li').removeClass('active');
		$(this).parent().addClass('active');
		$(this).parent().find('ol').slideDown();
		last_ol.slideUp();
		$(this).parent().find('ol a').removeClass('active');
		$(this).parent().find('ol a').eq(0).addClass('active');
		change_template($(this).attr('href'));
		return false;
	});
	$('a.color:eq(0)').trigger('click');

	var initial_left = parseInt($('#customize').css('left'));

	$('#hide-button').live('click', function(){
		var container = $('#customize');
		var width = parseInt(container.outerWidth());
		if( !container.hasClass('hidden') ) {
			container.animate( {'left': -1*width+5});
			container.addClass('hidden');
		}else {
			container.removeClass('hidden');
			container.animate( {'left': initial_left });
		}
	});

	// responsive links
	$('.responsive a').live('click', function(){
		$('.responsive a').each(function(){
			$('body').removeClass( $(this).attr('rel') );	
			$(this).removeClass('active');
		});

		$('body').addClass( $(this).attr('rel') );
		$(this).addClass('active');

		set_frame_height();

		return false;
	});
	$('.responsive a:eq(0)').trigger('click');

	// add note if is mobile
	if( is_mobile_template ) {
		$('body').append('<div class="note">Please use Firefox or Chrome latest version to preview the mobile templates.</div>');
	}

	if( is_mobile() ) {
		$('body').removeClass('mobile');
		$('.note').remove();
		$('head').append('<meta name="viewport" content="width=device-width,user-scalable=no" />');
	}

});

function is_mobile() {
	return navigator.userAgent.indexOf('iPhone') != -1 || navigator.userAgent.indexOf('iPod') != -1 || navigator.userAgent.indexOf('iPad') != -1 || navigator.userAgent.indexOf('Android') != -1 || navigator.userAgent.indexOf('Zune') != -1;
}
* { padding:0; margin:0; outline:0; }
html { overflow:hidden; }
body { overflow:hidden; font-family: "Trebuchet MS", sans-serif; background:#fff; font-size:12px; line-height:14px; color:#754a27; }
.cl { font-size:0; line-height:0; height:0; display:block; clear:both; }
a { cursor:pointer;}

#customize { width:200px; position:absolute; top:10px; left:-11px; z-index:10; }

#customize-holder { width:168px; background:#fef9ec; border:solid 1px #d7bb9d; padding:6px 10px 10px 20px; text-align: center; position:relative; z-index:20;}
#customize-holder { -moz-box-shadow:0 0 10px #999; -moz-border-radius:5px; border-radius:5px;}
#customize-holder { -webkit-box-shadow:0 0 10px #999; -webkit-border-radius:5px; box-shadow:0 0 10px #999}

#frame { position:relative; z-index:1; margin:0 auto;}
h2 { font-size:18px; line-height:18px; }
h3 { font-weight: normal; font-size:13px; border-top:solid 1px #d7bb9d; border-bottom:solid 1px #d7bb9d; padding:8px 0; margin-top:5px; text-transform: capitalize; margin-bottom:1px;}
.colors { border-bottom:solid 1px #d7bb9d; padding-bottom:1px; }
.colors ul{ list-style-type: none; text-align: left; border-top:solid 1px #e9d7be;  }
.colors ul li { }
.colors ul li ol{ padding:5px 0 5px 30px; display:none; border-bottom:solid 1px #e9d7be;}
.colors ul li ol li{ padding:0 0 3px 0; text-transform: capitalize;}
.colors ul li ol li a{ color:#754a27; text-decoration: none; display:block;}
.colors ul li ol li a:hover{ color:#d3b596;}
.colors ul li ol li a.active{ font-weight: bold; color:#333;}
.colors a.color { text-decoration: none; color:#754a27; display:block; height:21px; border-bottom:solid 1px #e9d7be; padding:4px 0 0 6px;  }
.colors a.color:hover { color:#d3b596; }
.colors a.color strong{ float:left; white-space:nowrap; line-height:18px; font-size:13px; padding-left:7px; text-transform: capitalize;}
.colors a.color span{ float:left; width:13px; height:13px; border:solid 1px #e1d4c2; font-size:0; line-height:0; padding:1px; }
.colors a.color span{ -moz-box-shadow:0 0 5px #c5b099; -webkit-box-shadow:0 0 5px #c5b099; box-shadow:0 0 5px #c5b099; }
.colors a.color span em{ display:block; width:13px; height:13px; }
.colors a.color span em b{ display:block; width:13px; height:13px; }
.colors a.color span em b{ background:-moz-linear-gradient(#fff, #000); opacity: 0.5; -moz-opacity: 0.5; filter:alpha(opacity=50); background:linear-gradient(#fff, #000);}
.colors a.color span em b{ background:-webkit-gradient(linear, left bottom, left top, color-stop(1, #fff), color-stop(0, #000)); }
.colors a.color span,
.colors a.color span em,
.colors a.color span em b{ -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px }
.colors a.color:hover span { border-color:#b8926f;}
.colors .active a.color { color:#333; background:-moz-linear-gradient(#fbf4e6, #f1e4cb); background:linear-gradient(#fbf4e6, #f1e4cb); }
.colors a.color:hover,
.colors .active a.color { background:-moz-linear-gradient(#fbf4e6, #f1e4cb); background:linear-gradient(#fbf4e6, #f1e4cb); }
.colors a.color:hover,
.colors .active a.color { background:#f8f0df; background:-webkit-gradient(linear, left bottom, left top, color-stop(1, #fbf4e6), color-stop(0, #f1e4cb)); }
.colors .active a.color span{ -moz-box-shadow:0 0 5px #492d13; -webkit-box-shadow:0 0 5px #492d13; box-shadow:0 0 5px #492d13; }
.colors .active a.color span{ border-color:#754a27;}
.colors .active a.color em b{ opacity: 0.1; -moz-opacity: 0.1; filter:alpha(opacity=10); }

#loading { position:absolute; top:21px; left:50px; z-index:3; display:none;}
#loading span{ width:90px; text-align: center; padding:8px 0 8px 22px; background:#fef9ec; border:solid 1px #edddc8; display:block; position:relative;}
#loading span{ -moz-border-radius:5px; border-radius:5px; -webkit-border-radius:5px;}
.mc-logos { font-size:0; line-height:0; padding:9px 0 0 0;}
.logo { font-size:0; line-height:0;}

#hide-button { width:14px; height:20px; position:absolute; top:50%; right:-14px; cursor:pointer; z-index:20; background:#fef9ec url(images/hide.png) no-repeat 3px center; border:solid 1px #d7bb9d; border-left:0;}

#hide-button { -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 3px; 
	-moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px;}

.iframe-holder { font-size:0; line-height:0; text-align:center; margin:auto; }

/** mobile body */
body.mobile { background-image:url(images/mobile-bg.jpg); background-repeat:no-repeat; background-position:center 10px;}
body.mobile .iframe-holder{ width:336px; padding:72px 0 0 0; }
body.mobile .iframe-holder iframe{ overflow-x:hidden; }

.note { font-size:11px; text-align:center; padding:75px 0 0 0; color:#999;}

/** responsive links **/
.responsive { border-top:solid 1px #d7bb9d; text-align:center; margin-top:10px; font-size:11px; line-height:14px; padding-top:5px; }
.responsive a{ background:#f8f0df; border:solid 1px #d7bb9d; display:inline-block; padding:2px; margin:0 1px;}
.responsive a{ border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px; text-decoration:none; color:#754a27;}
.responsive a.active{ font-weight:bold;}

/** tablet body **/
body.tablet { background-image:url(images/tablet-bg.jpg); background-repeat:no-repeat; background-position:center 10px;}
body.tablet .iframe-holder{ width:784px; padding:62px 0 0 0;}
body.tablet .iframe-holder iframe{ overflow-x:hidden; }
<div id="customize">
	<div id="customize-holder">
		<h2>Responsive Test</h2>
		
				<div class="responsive">
			<a href="#" rel="desktop">Desktop</a>
			<a href="#" rel="tablet">Tablet</a>
			<a href="#" rel="mobile">Mobile</a>
		</div>
				
					<h3>Selecionar Layout:</h3>
				
		<div class="colors">
			<div class="cl">&nbsp;</div>
						<ul>
				<li>
					<a href="http://answall.com" class="color" style="color:#">
												<strong>default</strong>
					</a>
					<ol>
												<li><a href="#">home</a></li>
											</ol>
				</li>
			</ul>
						<div class="cl">&nbsp;</div>
		</div>
		

	</div>
</div>
<div class="iframe-holder">
	<iframe id="frame" src="" width="100%" scrolling="auto" frameborder="0"></iframe>
</div>

Browser other questions tagged

You are not signed in. Login or sign up in order to post.