Conceal content within a bullet point

I'm encountering an issue with this specific element.

HTML

<div class="navbar slide-menu">
<div class="container">
    <ul class="nav navbar-default">
        <li class="brand"><a href="#">Menu</a></li>
        <li class="make-hidden"><a href="#">Home-to landing page</a></li>
        <li class="make-hidden"><a href="#">More-find out more</a></li>
        <li class="make-hidden"><a href="#">Social-connect with us</a></li>
        <li class="make-hidden"><a href="#">Contact-find us near you</a></li>
    </ul>
</div>

CSS

.slide-menu{
float:left;
width:50%;
height: 100%;
margin-left:0px;
margin-top:100px;
}
.container{
margin-left:0;
padding: 0;
}
.nav{
width:25%;
margin-left:0;
}
.make-hidden{
position: absolute;
width:15%;
z-index: 1;
overflow: hidden;
}
.make-visible{
width:100%;
transition:width 0.7s linear;
}

In addition, there is some JQuery code to make the li elements expand to 100% width on mouse enter. However, my challenge lies in displaying only a portion of text inside the hidden li element without resizing it to full width and height. Is there a solution or workaround for this? Appreciate any insights! Thanks

Further information:

jqueryhtmlcss

Answer №1

.slide-menu {
  float: left;
  width: 50%;
  height: 100%;
}
.container {
  margin-left: 0;
  padding: 0;
}
.make-hidden {
  /* position: absolute; */ /* <------------- removed */
  width: 15%;
  white-space: nowrap; /* <----------------- this is key */
  z-index: 1;
  overflow: hidden;
  transition: width 0.7s linear; /* <--------- this has been moved */
}
.make-hidden:hover {
  width: 100%;
}
<div class="navbar slide-menu">
    <div class="container">
        <ul class="nav navbar-default">
            <li class="brand"><a href="#">Menu</a></li>
            <li class="make-hidden"><a href="#">Home-to landing page</a></li>
            <li class="make-hidden"><a href="#">More-find out more</a></li>
            <li class="make-hidden"><a href="#">Social-connect with us</a></li>
            <li class="make-hidden"><a href="#">Contact-find us near you</a></li>
        </ul>
    </div>
</div>

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

Concealing table columns using JavaScript - adapt layout on the fly

I am currently implementing a responsive design feature on my website, where I need to hide certain columns of a table when the viewport size decreases beyond a specific point. Initially, I tried using .style.visibility = "collapse" for all <tr> elem ...

javascripthtmlcssresponsive-design

How can I create a tooltip or something similar for an HTML input field?

Seeking a solution for adding additional information to an HTML input field while typing or hovering over it. Attempted the following code snippet: <input type="text" onmouseover="window.status='hello world'; return true;" name="TextInput" ta ...

html

Navigate to a particular section in the webpage

There are a few div elements with the class .posts that each have an attribute data-id which corresponds to the ID in a MySQL database. <div class="posts" data-id="1"></div> <div class="posts" data-id="2"></div> If I want to scrol ...

javascriptjqueryhtmlscroll

substitute bullet point list item with new element

Assuming I have a list: <ul class="ul-1"> <li class="li-1">xx -1</li> <li class="li-2">xx -2</li> <li class="li-3">xx -3</li> </ul> Then I store it as: var list = $('.ul-1').html(); In ...

javascripthtmljquery

Python Selenium: How to locate elements using xpath in the presence of duplicate elements within the HTML code

Currently, I am utilizing selenium to extract data from a liquor sales website to streamline the process of adding product information to a spreadsheet. My workflow involves logging into the website using selenium and searching for the specific product. Wh ...

pythonhtmlseleniumxpath

Invert the jQuery function if the input is marked as selected

I successfully implemented a function to sort a list based on the content of a span element. var list = $("ul#videosList"); var desc= false; list.append(list.children().get().sort(function(a, b) { var aProp = $(a).find("span").text(), bProp = ...

jquerycheckboxif-statement

Tips on organizing and designing buttons within a canvas

let canvas = document.getElementById("canvas"); let context = canvas.getContext("2d"); // for canvas size var window_width = window.innerWidth; var window_height = window.innerHeight; canvas.style.background="yellow" canvas.wid ...

javascripthtmlcsscanvashtml5-canvas

Eliminating unnecessary whitespace between the bottom of the document and an element

I have a HTML page that when scrolled should limit scroll to the document height. It must not exceed the bottom of an element. Here is a screenshot for better understanding: https://i.stack.imgur.com/RaVg8.jpg The scrolling should be limited after the En ...

javascriptjqueryhtmlcss

I'm curious as to why my form fields disappear even when they have not been selected

Illustration of Form Fields Disappearing When Unselected Greetings, I'm encountering an issue where my form fields disappear when not selected. I'm utilizing Crispy Forms to render the form, following a tutorial on YouTube. This functionality w ...

pythonhtmldjangobootstrap-4django-crispy-forms

What strategies can be implemented to improve the load time for bigvideo.js?

Why are my load times extremely slow for such a small site? I had hoped to display an image before the video loads, but they both seem to load simultaneously, even if the video takes forever to load. This is my HTML: <div id="bigvid"> <div cla ...

javascriptjqueryhtmlcss

Applying CSS to text before using jQuery for formatting

Currently, I am utilizing jQuery.before to insert text into my web application using JavaScript. The text is appearing on the screen, however, it is not being styled according to the CSS rules specified in the HTML file. Is there a way to ensure that jQu ...

jquery

Is there a way to ensure that a div automatically moves below the main div when it reaches its full length?

I am facing an issue with a foreach statement in jQuery where I am generating Bootstrap cards for each product in a list. The problem arises when attempting to create multiple cards in a row, as the width of the cards becomes too small for the content. I ...

jquerycssbootstrap-5

The accuracy of IE9 <section> is not quite up to par

When viewing This Page in IE9, the element section#tcs-website-content appears as 990px wide even though its CSS property is set to width: 100%. This occurs despite all parent elements also having a width of 100%, resulting in a browser width of 1024px. A ...

csshtmlinternet-explorer-9width

What is the best way to utilize $(target) within a directive?

I created a custom directive for selecting time using two blocks. The challenge is detecting the target event on specific blocks within the directive's template. Directive Template: <div class='time-picker-container'> <div clas ...

javascriptjquerycssangularjs

Having all components, such as images, on a single page load simultaneously in the browser

My asp.net page is burdened with heavy content. As it loads, images start appearing before the rest of the content is fully loaded. We are looking to eliminate this behavior and have the page display only once all content is ready to be shown at once. Ho ...

c#jqueryasp.net.netajax

What is the best way to generate an HTML snapshot using C#?

I'm currently working on a page with Ajax functionality and I'm interested in making it SEO crawlable. After reviewing Google's guidelines at https://developers.google.com/webmasters/ajax-crawling, I learned that I need to use "#!" to create ...

htmlseo

Customizing the css for a certain category

On my homepage, I display categories with unique labels and icons. Each category is assigned a specific color for its label/icon. Typically, setting unique colors in HTML is straightforward: <!-- ngRepeat: category in categories | orderBy:'displ ...

htmlcsscategories

Tips for sending jQuery variable with an Ajax GET call?

I have a jQuery slider that generates values. Now, I need to pass these variables to a URL in the format using an Ajax get request. In my index.php file, I have the following JavaScript code which assigns values to the variables 'rich' and &apo ...

jqueryajaxgetslider

Having trouble getting jQuery .append() to behave the way you want?

I have created a code snippet to display a table like this: $("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr>"); $("#results").append("<tr><td>John</td><td>123123123 ...

javascriptjquerycss

When switching from JavaScript to jQuery, the button values become invisible

Currently, I have a functional app that can dynamically change the values of buttons based on user input. The current implementation is in vanilla JavaScript within the script.js file. However, I am looking to enhance the functionality and user experience ...

javascriptjqueryhtmlcssajax