Creating NavBar to Test Responsive Site

Question

Creating NavBar to Test Responsive Site

Navigation

#1 by (3 votes)
#2 by (-2 votes)

2

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

Status: 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 website and 3 icons, mobile, tablet and desktop, so that it changes the screen resolution and be easy to test responsive version.

If you do not understand, before you reject it, please comment here and I'll try to explain it better.

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

There is an example that could show ThemeForest , that navbar they use in the demo of a theme.

html5 css3 nav-bar

asked by anonymous 23.03.2016 / 17:09

2 answers

3

I was a bit doubtful about your question, however using Bootstrap you can do what you want (I interpreted it in two possible ways), see the following examples and tell if any of them help:

Static navigation bar at the top

Fixed navigation bar

23.03.2016 / 17:18

How to upload .txt file and save to a directory using c # .net mvc? What is the best way to create a model that has a field that is an integer enum?

score -2 · Accepted Answer

Who was or is looking for the same as me, here is the solution:

Chewed side-menu code to test 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://pt.stackoverflow.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>