Aliemaheith
New Member
I'm tryig to build a responsive website. I'm at the first phase in which, according to the "content first" metodology, I must consider the smallest mobile layout. The homepage (under construction) is something like this:
When the user clicks, for instance, on the first icon a secondary nav bar appears below the principal one. See this image (don't look at the icons, the images are random and temporary):
I would like graphically linking the two bars in some way. I don't know, maybe with an image like in these examples:
Is this a correct way to do this thing? And, also in the case that it was a good practice, how can I position the "link image" in a way independent from the screen width? The position has to be based on other elements position or, maybe, on percentages. It cannot be based on an absolute positioning. In this case, indeed, resizing the screen will make a mess like in the image below:
This is my html page with some jQuery:\[code\]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Responsive Site</title><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15650250/css/reset.css"><link rel="stylesheet" type="text/css" href="http://stackoverflow.com/questions/15650250/css/princstyle.css"><script type="text/javascript" src="http://stackoverflow.com/questions/15650250/js/jquery-1.9.1.min.js"></script><script>$(document).ready(function(){ <!-- hide the secondary navigation bar --> $("#socialnav").hide(); $("#social-icon").click( function(){ $("#socialnav").toggle(); })});</script></head><body> <!-- header --> <div class="big"> <h1 class="big-font"> Responsive Website </h1> <h2 class="medium-font"> trytrytrytrytry </h2> <ul id="generalnav" class="nav big centered-content dark-background"> <li><img id="social-icon" alt="social_icon" src="http://stackoverflow.com/questions/15650250/img/social.png"></li><!-- --><li><img alt="sections_icon" src="http://stackoverflow.com/questions/15650250/img/sections.png"></li><!-- --><li><img alt="javascript_section_icon" src="http://stackoverflow.com/questions/15650250/img/javascripticon.png"></li> </ul> <ul id="socialnav" class="nav big centered-content dark-background"> <li><img alt="social_icon" src="http://stackoverflow.com/questions/15650250/img/social.png"></li><!-- --><li><img alt="sections_icon" src="http://stackoverflow.com/questions/15650250/img/sections.png"></li><!-- --><li><img alt="javascript_section_icon" src="http://stackoverflow.com/questions/15650250/img/javascripticon.png"></li> </ul> </div></body></html>\[/code\]Thank you for helping me! This is my jsFiddle (The only icon that works (toggles) is the left one).