Artistically connect the main navigation bar to the secondary one

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).

Answer №1

To start, make sure to nest the lists properly by making the second one a child of the first.

    <ul id="generalnav" class="nav big centered-content dark-background">
        <li><img id="social-icon" alt="social_icon" src="img/social.png">
            <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></li>
        <li><img alt="sections_icon" src="img/sections.png"></li>
        <li><img alt="javascript_section_icon" src="img/javascripticon.png"></li>
    </ul>

Once nested correctly, you can easily perform actions like the following without relying on Javascript:

    #generalnav li ul { display:none; }
    #generalnav li:hover ul { display:block; }

This structure also allows for the use of relative positioning for the linked images.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I use jQuery to switch the positions of two <div> elements in HTML based on the selection of a dropdown value?

I need to switch the display positions of two <div> containers based on a dropdown value change. Can this be accomplished using jQuery? Here are the two div containers whose display positions need to be interchanged: <div id="first"><p> ...

Browse through and review all information - utilizing python selenium

I am currently working on a project that involves scrolling and retrieving every post made by users. However, I am facing an issue where my code is only reading 2 or 3 posts before moving on to the next one. I have tried adjusting the sleep() duration, p ...

Utilizing JQuery to make Google listings easily findable

Implementing Google Places for a location text box has been successful. However, I am now looking to create a class-based implementation so that I can use it with multiple places effortlessly. Is it possible to achieve this using JQuery? <script type ...

Embedded HTML code within a table cell

How can I dynamically build an HTML string and display it inside a cell in reactJS' ag grid? Here's my example: function generateHtmlString(props) { let myHtmlString = "<span>a</span>"; myHtmlString += "--"; myHtmlString += "&l ...

Unable to concentrate on HTML input elements

TL;DR just click on this link I'm having a problem with my input elements - they seem to be on strike and not working properly. I've simplified the code to focus on the variables, and while I found some solutions that work, I believe there' ...

Learn how to create a horizontally scrollable ToggleButton using MUI when the ToggleButtonGroup exceeds the screen width

Looking to enhance the responsiveness of my web design project, I aim to create a horizontally scrollable ToggleButton using Mui. The goal is to have the buttons adjust when the screen width becomes too narrow to display all three buttons at once, allowing ...

Ways to expand HTML input fields to fill the whole table cell

Currently working on a calculator project and I'm facing an issue with making a HTML button span the entire cell. I've managed to stretch the button horizontally but struggling to get it to fill the cell completely. Curious as to why setting widt ...

What is the reason for the num pad being classified as a character?

Everything is functioning correctly, but when I use the number pad on the right side of my keyboard, it registers as a character and gets deleted. However, the numbers on the left side are accepted without any issue. I want to be able to input numbers usin ...

Exploring the possibilities of NodeJs by analyzing an HTML form

I'm facing an issue while evaluating an HTML Form using NodeJs and Express. Here's my JavaScript Code My aim is to manage HTML Forms in NodeJs using Express. const express = require('express'); const http = require('http'); ...

The minification of HTML scripts may cause problems with the <script> tag

Greetings! I have a PHP script that is used to minify the page by removing any comments or spaces. Here is the script: <?php function sanitize_output($buffer) { $search = array( '/\>[^\S ]+/s', '/[^&b ...

Having trouble with installing create-react-app for my_app using npm because it seems to be stuck on f

I've hit a roadblock while trying to create a react app on my 2011 MacBook Pro. To start, I downloaded the latest version of Node from their official website. Following the instructions from React documentation, I ran the following commands: npm uni ...

Generate an HTML table dynamically from a PostgreSQL query

I am facing a challenge that may be simple for experienced individuals but is proving to be difficult for me as a newbie. The task at hand involves retrieving JSON data from a database query and displaying it in an HTML table using Node.js, Express, and Po ...

Automatic width table design

I am trying to position the "User ID" label closer to its value by aligning it to the right side, as shown in the picture below. I have attempted using additional colspan's but haven't been successful. The User ID can contain anywhere from 1 to 9 ...

Is it possible to change %20 in a URL to a hyphen?

Is there a way for my search form to display %20 in the URL when I fill the input field with spaces? For example: Basketball coach Current output: basketball%20coach Desired output: basketball-coach <form action="/tag/" id="form-hockey_v1" name=" ...

What is the best way to incorporate variables into a text file using ajax?

I am having an issue with my code. I have written a script that allows users to draw an image on canvas and then extract pixel values from the clicked location, writing them into a text file using ajax. However, I am facing problems with my onclick and a ...

Issue with CSS3 calc() validation: Invalid value provided for width, resulting in a parse error

Can you help me validate a CSS3 file that contains the following code snippet? width:calc(96.3% - 312px) When I try to validate it, I get this error message: Value Error : width Parse Error - 312px) My solution might be to implement a JavaScript func ...

Unusual Conduct when Interacting with ContentEditable Text

Looking for help with a strange issue that I can't seem to figure out. Hopefully someone has encountered this before and might have a solution. In my Angular app, I'm using a contenteditable <div> for inputting content, which is working fi ...

When switching to compatibility view in IE 9, ASP.NET MVC 5 with Angular may cause the browser to crash

Upon deploying my site with MVC 5, Api 2 integrated with Angular and JQuery onto an intranet server, I encountered a strange issue. Due to internal policy restrictions, all sites on the intranet must operate under compatibility view. This caused a problem ...

Steps to display images within a div from a specific directory

Recently, I have encountered a challenge that involves retrieving images from a specific directory, regardless of the number of images present, and then displaying them in a div using an unordered list. I attempted the following code snippet, but unfortuna ...

Creating a dynamic input box with an add/remove button in each row using jQuery

Need help with a jQuery-based UI that allows users to dynamically add input boxes. The desired look is as follows: Default appearance: INPUT_BOX [ADD_BUTTON] [REMOVE_BUTTON] Clicking on the [Add_Button] should add another row like this, and so on: ...