I am currently working on developing a responsive website. I am following the "content first" methodology, starting with designing for the smallest mobile layout. The homepage of the site (still under construction) looks something like this:
When a user clicks on one of the icons, a secondary navigation bar appears below the main one. Here is a sample image (disregard the actual icons as they are temporary):
I want to visually connect the two bars together in some way. Perhaps using an image like these examples:
Is this the correct approach? If so, how can I position the "link image" in a responsive manner that is not reliant on screen width? The placement should be based on other elements or possibly percentages, rather than absolute positioning. Otherwise, resizing the screen will cause issues like those shown in the image below:
Here 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="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/princstyle.css">
<script type="text/javascript" src="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="img/social.png"></li><!--
--><li><img alt="sections_icon" src="img/sections.png"></li><!--
--><li><img alt="javascript_section_icon" src="img/javascripticon.png"></li>
</ul>
<ul id="socialnav" class="nav big centered-content dark-background">
<li><img alt="social_icon" src="img/social.png"></li><!--
--><li><img alt="sections_icon" src="img/sections.png"></li><!--
--><li><img alt="javascript_section_icon" src="img/javascripticon.png"></li>
</ul>
</div>
</body>
</html>
I appreciate any assistance. Here is the link to my jsFiddle (Note: Only the left icon is functional).