Scroll along the menu smoothly, without causing any disruptions to the rest of the page

I have a piece of code that works, but not exactly as I want it to. What I would like is to create a menu bar where, upon hovering over an item, the options slide out from underneath, without pushing the other menu items down.

If this description isn't clear, feel free to copy the code below:

$(document).ready(function () {
    $('.selector').mouseenter(function () {
        $(this).find('> ul').slideToggle('fast');
    });
    $('.selector').mouseleave(function () {
        $(this).find('> ul').slideToggle('fast');
    });
});
* {
    border: 1px solid black;
}
body {
    width: 98%;
}
#title {
    text-align: center;
    font-size: 250%;
}
#menu_Bar {
    margin: 0.01%;
}
.sel_name {
    font-size: 70%;
    text-align: center;
}
.empty {
    list-style: none;
}
.options {
    display: none;
    background-color: lightblue;
}
.selector {
    background-color: transparent;
    display: inline-block;
    width: 19%;
}
<h1 id='title'>Welcome to My Site</h1>
    <div id='menu_Bar'>
        <div class='selector'>
            <p class='sel_name'>Home
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a></li>
                        <li><a href=''>option 2</a></li>
                        <li><a href=''>option 3</a></li>
                        <li><a href=''>option 4</a></li>
                        <li><a href=''>option 5</a></li>
                    </ul>
        </div>
        <div class='selector'>
            <p class='sel_name'>Shows
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a></li>
                        <li><a href=''>option 2</a></li>
                        <li><a href=''>option 3</a></li>
                        <li><a href=''>option 4</a></li>
                        <li><a href=''>option 5</a></li>
                    </ul>
        </div>
        <div class='selector'>
            <p class='sel_name'>Search
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a></li>
                        <li><a href=''>option 2</a></li>
                        <li><a href=''>option 3</a></li>
                        <li><a href=''>option 4</a></li>
                        <li><a href=''>option 5</a></li>
                    </ul>
        </div>
        <div class='selector'>
            <p class='sel_name'>About the Owner
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a></li>
                        <li><a href=''>option 2</a></li>
                        <li><a href=''>option 3</a></li>
                        <li><a href=''>option 4</a></li>
                        <li><a href=''>option 5</a></li>
                    </ul>
        </div>
        <div class='selector'>
            <p class='sel_name'>FAQ
                <p>
                    <ul style='display: none' class='empty'>
                        <li><a href=''>option 1</a></li>
                        <li><a href=''>option 2</a></li>
                        <li><a href=''>option 3</a></li>
                        <li><a href=''>option 4</a></li>
                        <li><a href=''>option 5</a></li>
                    </ul>
        </div>
</div>

jqueryhtmlcssinterfacemenu

Answer №1

I have made some modifications to the CSS class .selector. By including float:left and display:block instead of inline-block, I have ensured that your content aligns properly with the hovered element.

Feel free to use this updated code:

.selector {
    background-color: red;
    display: block;
    float: left;
    width: 19%;
}

Check out the demo here

Answer №2

Assign a unique id to the selector and apply the style rule position: absolute;

I have corrected your spelling errors as well.

Check out my demonstration here

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

Learn the process of transferring information through ajax while managing dependent drop-down menus

I have successfully set the initial value from the first combo-box and now I am looking to send the second variable from the second combo-box and receive it in the same PHP file. Below is the Ajax code snippet: $(document).ready(function(){ $(".rutas") ...

javascriptphpjqueryhtmlajax

Exploring JSON Object with ng-disabled in AngularJS

One unique feature of my web application is the ability to add new users (username + password) through a form. To prevent duplicate usernames, I have a JSON object called l_usernames defined in a controller named UsersController. This object contains all u ...

javascripthtmlangularjsjson

Tips on how to redirect the submit button code to the same page without reloading if feasible

I have developed a script that runs in a popup on a WordPress website. The main purpose of this script is to check the entered data against a MySQL database table and display related code if the information is found. If not, it should execute another set o ...

phpjquerymysqlajaxwordpress

The GitHub Pages website is not displaying exactly like it does when running locally with a live server

Currently in the process of creating a compact website where users can input an anagram and receive all potential words that can be formed from it. Additionally, upon receiving these words, there is an option to click on one for its definitions. The site ...

javascripthtmlcssgithub-pages

If the Ajax request is successful, scroll to the bottom of a Div using jQuery

An interesting scenario arises with this Div that contains user messages, where the newest message always appears at the bottom of the Div and triggers a scroll bar if the message count exceeds the height of the div: <div class="list-group-message" s ...

javascriptjqueryhtmlajaxautoscroll

Numerous operations included in a JavaScript document

Looking to enhance my JS file by adding multiple functions, but I'm having trouble as I'm not very familiar with JavaScript. Here's what I've got so far. $(function(){ $('.incentives').hide(); $('.incentives-click&a ...

javascriptjquery

Extract the ID data from the template model form and utilize Django's AJAX to showcase the corresponding information fetched from the database

Currently, my view is set up to display the latest ID and its corresponding data from the database. You can see a sample form by following this link: My goal is to take the displayed ID, send it to my view, increment it, and then show the data related to ...

jqueryajaxdjangodjango-formsdjango-views

Creating a straightforward image slideshow using jQuery featuring next and previous buttons

I am looking for assistance in adding next and previous buttons to this slider. I came across a code snippet on a blog that could be useful, which can be found at .net/dk5sy93d/ ...

javascriptjqueryhtmlcss

Various methods for deactivating controls in a CSS class

Is there a way to disable all buttons within a specific class? I have attempted the following code without success: $("input.myClass").attr('disabled', true); This is how I am trying to implement it: <script type="text/javascript> ...

javascriptjquerycsswebforms

JavaScript OOP problem with object instances

I'm currently working on developing an app in JavaScript and trying to grasp the concept of Object-Oriented Programming. I created a simple "class" where I set an empty array in its prototype. However, when I create objects from this class and pass va ...

javascriptjquery

Tips for receiving accurate HTML content in an Ajax request

I have used an Ajax call to fetch data from a function that returns an entire HTML table. $.ajax({ url: "/admin/project/getProjectTrackedTimes", headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('cont ...

javascriptjqueryhtmlajaxformat

Exploring the process of passing parameters in Material-UI React styled components

Recently, I developed a new component const CategoryDialog = (props) => { const classes = useStyles(); console.log(props); return ( <div> <Dialog fullScreen open={props.dilaogOpenProp} TransitionCompone ...

javascriptcssreactjsmaterial-ui

Unable to retrieve the most recent global variable value within the confirmation box

<script type="text/javascript"> var customDiv ="hello"; $(function () { var $form = $("#authNotificationForm"); var startItems = $form.serializeArray(); startItems = convertSerializedArrayToHash(startItems); $("#authNoti ...

javascriptjquerydialogmodal-dialogconfirmation

Svelte's feature prevents users from inputting on Mapbox

My goal is to prevent user input when the variable cssDisableUserInput is set to true. Here's what I have within my main tags: <div id=userinput disabled={cssDisableUserInput}> <div id="map"> </div> Within my CSS, I&a ...

javascripthtmlcsssveltemapbox-gl-js

Can you please provide me with detailed instructions on how to use the radio button?

As someone who isn't a professional coder, I dabble in creating code for fun. Right now, I'm working on a roleplay project on a website where each character has a designated "space" to input HTML and CSS code as a template. I've stumbled upo ...

htmlcssradio-button

Struggling to position an image and text side by side within a div using CSS

Is there a way to display a message inside a div with an icon positioned to the left? The desired outcome is for the icon to always be next to the text and aligned at the bottom-center of the div. https://i.sstatic.net/RnZMq.png https://i.sstatic.net/aSR ...

htmlcss

Executing php class method through ajax with jQuery without requiring a php handler file

How can I trigger a PHP class method using AJAX with jQuery without the need for a separate PHP handler file? Here is my PHP Class animal.php:- <?php class animal { function getName() { return "lion"; } } ?> jQuery code snippet:- ...

javascriptphpjqueryajax

seize the cursor on chrome for windows

I'm experiencing an issue with two cursors appearing in Windows Chrome version 31.0.1650.57. The two cursors are grab and a default arrow. I have applied the following CSS: CSS div { width:200px; height:200px; background-color:maroon; ...

htmlcsscursor

What is the best way to keep horizontal divs aligned in a row with margins between them within a wrapper?

I have arranged three divs in a row with a 10px margin between them within a responsive layout. Currently, the divs have margin-left: 10px; margin-right: 10px; to create spacing. However, I aim to align them perfectly within the wrapper without any extra ...

csshtml

I encountered an issue where my button's onClick function was not functioning properly with the clickable component

Here is my display I have a component(Product) that can be clicked. One of its children is also a button. However, when I click it, the Product's function runs. How can I make sure my button executes separately? <ProductForm> ...

javascripthtmlcssreactjs