When the target event occurs on a div element, update the style of a different

Currently, I am working on creating a responsive mobile-first navigation system and exploring progressive enhancement techniques.

The objective is to target the #header element by clicking a menu icon, which will then adjust the height of the #menu to 100%, effectively displaying it when the icon is clicked.

My initial attempt was as follows:

#header:target #menu {
      height:100%;
}

Unfortunately, this approach did not yield the desired results. Does anyone have any recommendations on how to modify the height of the #menu when the #header is targeted?

View demo on jsFiddle

Edit: As I am focusing on progressively enhancing this navigation without relying on jQuery or JavaScript, I am seeking a solution that works across all devices before considering additional UX improvements. Therefore, the implementation must be done without the use of jQuery or JavaScript.

<body id="home">

    <div class="wrapper">

        <header id="header">

            <h1 class="logo"><a href="">Nav</a></h1>
            <a href="#header"> <div id="nav_btn"> </div> </a>

        </header>

        <nav id="primary_nav">

            <ul id="menu">
                <li><a href="">Portfolio</a></li>           
                <li><a href="">About Me</a></li>            
                <li><a href="">Nonsense</a></li>            
                <li><a href="">Services</a></li>            
                <li><a href="">Contact</a></li>                     
            </ul>

        </nav><!--end primary_nav-->

    </div><!--end wrapper-->

</body>
htmlcss

Answer №1

#menu is not a subordinate of the #header so you cannot just utilize a subordinate selector.

It is the offspring of the succeeding element after the #header

header#header:target + nav#primary_nav > ul#menu { }

Answer №2

modify the href attribute of the button to #home

thus transforming

<a href="#header"> <div id="nav_btn"> </div> </a>

into

<a href="#home"> <div id="nav_btn"> </div> </a>

and apply this css code

#home:target #menu {
      height:100%;
}

see example

Answer №3

A solution is possible, but not in the manner you are attempting.

Consider this example:

http://jsfiddle.net/MarmeeK/svu5z/2/

The selector will function as follows:

#div2{height:100px;width:100px;background:red}//original color is red
#link1:hover ~ #div2{background:green} on link hover div color become green

I am confident that this approach will also work for adjusting height :)

Answer №4

Your #menu needs to be a direct child of #header, so make the following adjustments:

HTML

<div id="header">
  <div id="menu"></div>
</div>

CSS

#menu:target {
  height: 100%;
}

see example in action

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 one determine the dimensions of the browser window using a property?

Can someone please clarify how to find the width and height of the browser window specifically? Thanks in advance! ...

javascripthtmlcss

The binding in Knockoutjs is working properly, but for some reason the href attribute in the anchor tag is not redirecting to

Here is the HTML code snippet I am working with: <ul class="nav nav-tabs ilia-cat-nav" data-toggle="dropdown" data-bind="foreach : Items" style="margin-top:-30px"> <li role="presentation" data-bind="attr : {'data-id' : ID , 'da ...

javascripthtmlknockout.js

The structure of the figure tag for HTML5 validation

Could you please confirm if the Figure tag is correctly used in the html structure? Regarding html5 validation, can I use this structure? <a href="#"> <figure> <img src="" class="img-responsive" alt=""> <figcaption> ...

csshtml

Is there a way to eliminate the bottom border on the active navigation tab?

Here's the information I've gathered: Below is a snippet of code that I have: .nav-tabs { border-bottom: 3px solid #3FA2F7 !important; } .nav-tabs .nav-link { color: #02194A; font-size: 13px; padding: 12.5px !important; } ...

htmlcssbootstrap-4

Ensure that all divs have the same height and padding when resizing

I have 3 divs nested within a parent div. My goal is to dynamically set the height of all the child divs to match the height of the div with the maximum height, even when the screen resizes due to responsiveness. Below is my HTML structure: <div class ...

javascriptjquerycss

Utilizing Gulp variables to create dynamic destination file names?

As a newcomer to gulp, I am curious about the feasibility of achieving my desired outcome. Here is the structure of my projects: root | components | | | component_1 | | styles.scss | | actions.js | | template.html | | ... | componen ...

javascriptcsssassgulp

What is causing this JavaScript alert to malfunction?

My current project involves working with ASP.NET and in the view, I have a code snippet that is causing some issues. When I attempt to use Sweet Alert outside of the function, it works perfectly fine. Similarly, if I switch out Sweet Alert for a regular al ...

javascripthtmlasp.netalertsweetalert

Creating SVG Lines with Google Maps JavaScript API v3

I have a project that requires a dashed line between two points on Google Maps using JavaScript v3. The specification states that each dash should be 100px long. I have attempted to achieve this using SVG, but the dashes are not displaying correctly. Here ...

javascripthtmlgoogle-maps

Issue encountered when assigning a CSS class to Angular component

My module contains a table structure with specific components. Here is the source code for table.component.html: <table border=1> <theader></theader> </table> The source code for theheader.component.html is as follows: <thea ...

htmlcssangular

Confirm the data within an HTML table and apply color coding to the cells appropriately

Currently, I have an HTML table used to automatically validate data collected from soil pollutants analyses. Here is a snippet describing the table structure: <table id="table1"> <thead class="fixedHeader"> <tr><input type="submit" ...

javascriptjqueryhtml

Is resizing possible using the Canvas identifier?

Is it possible to adjust the canvas size to match the width of the page using the canvas id's style in the html? Then in your javascript code for the canvas, can you have resize listeners that are responsive to the canvas size at any given time? I c ...

javascripthtmlcanvashtml5-canvas

CSS deep level selectors

For the following HTML/CSS code, I am trying to target only level 1 "row" elements and not their nested counterparts. However, when using the child selector, it still selects the nested elements. How can I achieve selecting only level 1 "row" elements? ...

htmlcsscss-selectors

Tips on building a blog using solely index.html, style.css, and script.js files

Looking for inspiration for blog listing pages? Check out some examples like: HubSpot's marketing blog or iGoMoon's blog. I'm trying to figure out where I should start. Should I begin with the first line of code? Or can I import sample code ...

javascripthtmlcssblogs

Substitute the element with its outerHTML and then grab hold of the fresh element instantly

My current approach involves replacing a DOM element by updating its content with the outerHTML property. This method is effective, but my challenge lies in promptly accessing the newly generated DOM element. Regrettably, I do not have control over the cr ...

javascripthtmldom

Retrieve the order in which the class names are displayed within the user interface

In the following code snippet, each div element is assigned a common class name. <div id="category_9" class="list_item" data-item_ids="[38]"</div> <div id="category_2" class="list_item" data-ite ...

javascripthtmlruby-on-railsajax

Having trouble accessing properties in AngularJS

This is my code snippet: app.controller('userController', function UserController($scope, userFactory) { $scope.users = []; $scope.user = { items : [] }; $scope.editMode = false; $scope.addItem = function () { $scope.use ...

javascripthtmlangularjs

How come it's so difficult to set the perspective camera to accurately display sizes in three js?

Currently, I am using Three Js to create a visual representation of a car. However, I am encountering an issue with the perspective camera that I can't seem to resolve. My goal is to make it appear more realistic by only showing the front of the car, ...

javascripthtmlcssthree.js

Using JSON data to populate the jQuery UI Datepicker

Is it possible to populate this jQuery UI datepicker calendar with data from a JSON file containing all non-working days for the years 2017 and 2018? P.S. return [!(month == 8 && day == 27), 'highlight', highlight]; - This example demons ...

javascriptjqueryhtmlcss

Issue with aligning Bootstrap 5 card tiles in a specific position

Can anyone guide me on the correct way to use the Bootstrap 5 card component to display an attached image in a card view? Here is my code: <!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags --> <me ...

htmlcsstwitter-bootstrapbootstrap-5

Display one table when clicked and hide the others

Within the structure of my webpage, I have numerous tables that follow a similar format but contain distinct content. Initially, all these tables are hidden from view. My goal is to design a functionality where clicking on a specific button will unveil onl ...

javascriptjqueryhtml