Dynamic graphic with integrated navigation menu

Question

Dynamic graphic with integrated navigation menu

I'm looking to achieve a similar design concept like the one on this website:

The navigation bar should remain fixed at the bottom of the window until you start scrolling.

I am unsure if this can be done using just CSS, but I have made some progress with the following code:

HTML

<div class="container">

<ul class="jquery slideshow">
  <li><img src="01.jpg" /></li>
  <li><img src="01.jpg" /></li>
</ul>

<div class="jquery navbar">
        <div class="inner">
            <a href="#s1" class="subNavBtn" id="s1">Section 1</a> 
            <a href="#s2" class="subNavBtn" id="s2">Section 2</a>
            <a href="#s3" class="subNavBtn" id="s3">Section 3</a>
            <a href="#s4" class="subNavBtn" id="s4">Section 4</a>
            <a href="#s5" class="subNavBtn" id="s5">Section 5</a>
        </div>
    </div>
</div>

CSS

.container{
    width:100%;
}

Currently, there is a slideshow and a navigation bar below it spanning the full width. My goal now is to make them responsive to fit any window size seamlessly.

jquery html css

Answer 1

Answer №1

By utilizing the power of CSS alone, you can achieve this effect without relying on jQuery. Utilize the calc function to make it happen:

.slideshow {
    height:calc(100% - 100px);
}

.navbar {
    height:100px;
}

This approach informs the browser that the navigation bar should be 100 pixels tall (adjust as needed), while the slideshow will fill the remaining window height after subtracting the 100 pixels from the navbar's height. This setup ensures that the navigation bar stays fixed at the bottom of the page.

UPDATE: After testing locally, everything functions correctly. However, when attempting to showcase it on jsfiddle, an issue arises. The code works seamlessly on IE and Chrome with the following adjustments:

UPDATE 2: I discovered the root cause of the problem. It turns out I omitted the doctype declaration. Once the doctype is added along with specifying the heights for the container and body elements, the solution functions flawlessly. Check out this JSFiddle demo for a working example.

Answer 2

By utilizing the power of CSS alone, you can achieve this effect without relying on jQuery. Utilize the calc function to make it happen:

.slideshow {
    height:calc(100% - 100px);
}

.navbar {
    height:100px;
}

This approach informs the browser that the navigation bar should be 100 pixels tall (adjust as needed), while the slideshow will fill the remaining window height after subtracting the 100 pixels from the navbar's height. This setup ensures that the navigation bar stays fixed at the bottom of the page.

UPDATE: After testing locally, everything functions correctly. However, when attempting to showcase it on jsfiddle, an issue arises. The code works seamlessly on IE and Chrome with the following adjustments:

UPDATE 2: I discovered the root cause of the problem. It turns out I omitted the doctype declaration. Once the doctype is added along with specifying the heights for the container and body elements, the solution functions flawlessly. Check out this JSFiddle demo for a working example.

Dynamic graphic with integrated navigation menu

Answer №1

Similar questions

Finding your way to a <div data-role="page"> sans the use of an anchor tag

Guide to combining two jQuery scripts that utilize distinct data types

Formatting that differs based on whether the content appears on the left

AngularJS and Spring Rest team up for seamless drag-and-drop file uploads

The loop in MVC is not functioning properly when dealing with various MapRoutes

jQuery SlideUp and SlideDown causing Margin Bug in Internet Explorer 7

Changing the class of an element in Svelte: A step-by-step guide

You are receiving a TypeError because the unbound method move_to_element() should be called with an instance of ActionChains as the first argument, but instead it was given a

Error in Angular 2: The app.component.html file triggered an exception at line 1, character 108 due to excessive recursion

Transforming a form containing recurring elements into JSON

Running Jest tests on an ajax request leads to an error involving the undefined $ variable

Is there an issue with JQM plugin due to jQuery's append() function?

What is the best way to set a textbox as read-only using jQuery?

Utilizing React to transform object data into table columns

How can you enable a button to be clicked from within a drawer?

Styling div elements to match the dimensions of table rows in CSS

What is causing this element to unexpectedly elongate when I hover on it, despite having a 3D rotation effect applied?

The grid columns are not utilizing the entire space of the rows and are extending beyond to the next line

Spooky results displayed on website from NightmareJS

Are there any alternative methods to avoid duplication of Navbar link margin classes in Tailwind CSS?