Vertically aligning collapsing menus in the center

As I continue to learn about HTML, CSS, and jQuery in order to enhance my personal website, I have encountered some challenges along the way. Thankfully, the support from individuals like yourself has been invaluable. Thank you!

Below is the current code snippet: http://jsfiddle.net/jcml/1eyz2z6g/

One issue that I've come across involves attempting to vertically center the menus by adding the class "center" to the div class "links." This has resulted in unexpected behavior, as shown here: http://jsfiddle.net/jcml/Lz4bq7mv/

.center ul {
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

1- How can I properly center the menus vertically in this scenario?

Additionally, I have observed an issue when using the website on a mobile device. Clicking on any link labeled "Bla" causes a large box to appear, selecting all the submenu items (the parent link and sibling blas).

2- Is there a way to modify this behavior?

Lastly:

3- Can an animation time be added for collapsing and expanding elements?

Thank you.

css

Answer №1

After trying multiple solutions without success, I came across a helpful post by user yuk that finally worked for me. Here is the outcome:

http://jsfiddle.net/jcml/rm5bhrm8/1

I implemented a new container class:

.container {
    display: table;
    height: 100%;
    position: absolute;
    overflow: hidden;
    width: 100%;
}

Additionally, I included the following in the links class:

display: table-cell;
vertical-align: middle;

Furthermore, I made adjustments to the structure by inserting a div container class before each links class.

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

Floating footers with centered content - they remain aligned in the center even when zoomed out

Behold my unique and straightforward footer design (100% zoom above, 70% zoom below) : To keep things simple, I aimed to center content with a single div having a fixed width and margin: 0 auto, all while maintaining the same color for the outer footer la ...

htmlcss

Hover Effect with CSS Selector - JavaScript or jQuery Implementation

I have a similar code snippet: <article class="leading-0"> <h2> <a href="link">link title</a> </h2> <ul class="actions"> <li class="print-icon"> <a ...><img...>& ...

javascriptjqueryhtmlcsscss-selectors

Ways to customize easypiechart appearance with CSS styling

I am looking to create a circular counter similar to the one shown below. I have tried using easy-pie-chart but I am unsure how to style the circles to look like the example provided. Is there a way to achieve this through CSS? Any recommended resources o ...

javascriptcsssvgcounterpie-chart

Menu is not functioning properly as it is not staying fixed in place

I am trying to create a fixed menu that sticks to the browser window as it scrolls. However, I am encountering an issue where the transition from sticky to fixed is not smooth when I remove position: relative; from navbar__box. window.onscroll = functio ...

javascriptjqueryhtmlcsscss-position

Transforming an image into a CSS-powered website menu button: Step-by-step guide

I am currently using images as button backgrounds, and I have programmed them to change when the button is clicked to give the impression that it is being pressed. However, I am looking to enhance the responsiveness of the page, so that the images also cha ...

css

Question marks instead of font-awesome symbols

Currently, I am utilizing font-awesome (sass version - Link) on my asp.net website. The issue I am facing is that all fonts are showing up as ? I have thoroughly checked the font path and the CSS class, but everything appears to be correct Below is the ...

cssasp.netsassfont-awesome

Tips for resolving unforeseen issues stemming from a CSS selector

Currently, I am diving into the world of SASS and experimenting with building webpages using this preprocessor. However, I encountered some errors in the CSS file generated from the SASS file. Below is the snippet of CSS code that is causing the issue: .l ...

htmlcsssass

"Trouble with Material-UI DataGrid: Column headers are being cut off

I am facing an issue where my column names are getting cut off even though they should fit in the available space. https://i.sstatic.net/kmKFi.png ...

cssreactjsmaterial-ui

Validation with Javascript can trigger the display of a hidden element

Hello there, I could really use some assistance with the JavaScript part of this code. I have two JavaScript functions: one for validating if a radio checkbox is selected, and another for revealing the "answer". Currently, an alert pops up if no selections ...

javascripthtmlcss

CSS3 flip effect on hover and click causing issues

I have successfully implemented a card flip effect using CSS3. The card is flipped using jQuery and CSS CSS .flipped { -webkit-transform: rotateY( 180deg ); -moz-transform: rotateY( 180deg ); -o-transform: rotateY( 180deg ); transfor ...

jqueryhtmlcsscss-transitions

the php renderer fails to take into account the styles

Trying to convey this as clearly as possible. I have the variables below: $name = main channel and $childs = sub channels. When I remove the childs from the HTML, only the main channel shows up - which is expected. However, when attempting to style the su ...

phphtmlcss

Click to shift the div downwards

Currently, I have a piece of javascript applied to a div that directs the user to a specific link: <div style="cursor:pointer;" onclick="location.href='http://www.test.com';"> I am wondering if there is a way to add an effect where, upon ...

javascriptcss

Navigate Behind Slider on Scrolling

My menu bar is going behind the cycle slider when I scroll down. It works fine on other sections but only causes trouble on the slider. I have tried using z-index 1, but it's not working. Can anyone provide a solution? I'm not sure what I'm ...

htmlcss

Deselect all child elements when the parent checkbox is not selected

Creating a page that features multiple checkboxes, some nested and others not. When a particular checkbox is selected, additional options will be displayed underneath it for selection; if unchecked, the child boxes will be hidden. Currently, this functiona ...

jqueryhtmlcss

Is there a way to automatically compile LESS files whenever I save a document?

After installing Less using npm with the command $ npm install -g less I currently compile my source files to .css by running $ lessc styles.less styles.css Is there a method through the command line to automatically compile the document when saving it ...

cssnode.jsnpmless

"Using enchant.js to create a game that utilizes an if statement to show a specific

I am looking to implement an if statement into my game that will display an html div (#game-over) once a certain score is reached. The div is currently set to "display:none". I have created a js fiddle for the game with the code $('#game-over'). ...

javascriptjqueryhtmlcssgame-engine

"Arranging elements with identical class in a single column but on separate rows using CSS grid - a step-by-step guide

I'm facing an issue with organizing choices and matches in columns using grid CSS. Currently, the match column is overlapping with the choice column. Here is how it is coded at the moment: .grid{ display:grid; grid-template-columns: 1fr 1 ...

htmlcsscss-grid

What is the best way to create collapsible rows in AngularJS with ng-repeat?

In my current project, I am utilizing ng-repeat to display objects in rows. To achieve my desired functionality of only displaying elements present in the DOM, I decided to use a helpful plugin called angular-vs-repeat. However, I am facing an issue with u ...

javascriptangularjscssangularjs-scopeionic-framework

The alignment of an inline unordered list is off-center

My website at this link features a sticky navigation bar. However, the list items are slightly misaligned to the left and I'm struggling to pinpoint the cause. Despite adjusting margins and padding extensively, the issue persists. It's important ...

htmlcsstwitter-bootstrapnav

What is the best way to maximize the use of the space available until reaching a div with varying dimensions each time

I have a div on the left that displays a name, and it can vary in length. On the right, there is another div with buttons. The number of buttons may change, so I am unsure how many will be displayed. Is there a way to utilize only CSS to make sure the fi ...

htmlcssposition