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

I developed a website and also created a mobile.html version, with the desire to seamlessly switch between the two based on screen

Using Google Fonts in a Typescript React application with JSS: A step-by-step guide

Is there a way to determine the app bar height within a React Material UI application?

Is there a way to display a message in a div container instead of using the alert box when there is a successful ajax response?

Is AJAX causing issues with my media uploader and color picker?

What is the best way to use CSS to connect the tips of shapes for perfect alignment?

JavaScript Fullcalendar script - converting the names of months and days

Sending parameters within ajax success function

The button's onclick function is failing to save the record in the database

Developing a dynamic comment reply feature using Django, jQuery, and AJAX to create

Corner of the Border Revealing a Clear Sky above

Expanding the outer div horizontally by using inner divs with scroll

Understanding the flow of block-level elements in documents when utilizing CSS :after pseudo selectors

The Cordova imagePickerEx plugin is now also offering a feature to retrieve cached images

Is it possible for me to sum up each row in the table and then deactivate it using a checkbox?

When opening a dialog at the bottom of the page, the window will automatically scroll to the top

Adjust the checkmark color of MUI Checkbox

The AJAX request was successful, however, the PHP script did not return any

Unresponsive jQuery Autocomplete function failing to trigger

Method for displaying or concealing list items with an onClick event in React without relying on JQUERY