CODEWITHSUNDEEP
htmlcssdropdownnav
user206904
user206904

Reputation: 550

prevent dropdown menu from expanding off-page

I am trying to create a responsive dropdown menu with icons and text in full mode and icons only when windows are small (for the top level). For the second level, I still want to show the names in the sub menu.

Full code On codepen: https://codepen.io/-royqooe/pen/QWmXEKw See the last element of the menu with sliders

My html :

<li><a href="home.php"><i class="fas fa-home"></i><span class="topbar-text">Home</span></a></li>

                            
                            <label for="btn-1" class="show_nav"><i class="fas fa-sliders"></i><span class="nav_parent topbar-text">Admin</span></label>
                            
                            <a><i class="fas fa-sliders"></i><span class="nav_parent topbar-text">Admin</span></a>
                            <input type="checkbox" id="btn-1">

                                <ul class="navbar_dropdown">
                                <li><a href="admin.php"><i class="fas fa-users"></i><span class="subbar-text">Manage users</span></a></li>
                                <li><a href="manage.php"><i class="fas fa-list"></i><span class="subbar-text">manage</span></a></li>
                                <li><a href="#"><i class="fas fa-users"></i><span class="subbar-text">browse files</span></a></li>
                                </ul>
                            </li>'

My responsive css

@media screen and (min-width: 630px) and (max-width: 1080px) {
    .topbar-text {
      display: none;
    }

      .subbar-text {
        font-size: 12px;
    }

    nav ul ul li{
        position: relative;
        margin: 0px;
        left: 0px;
        width: 150px;
        line-height: 0px;

        float: left;

    }
      
  }

The problem is probably around width: 150px; thing is if I remove it, the submenu will become so small, condensed, and ugly and have text divided into 3 lines but won't break out of the page. If I add a fixed width text shows inside as I want but it breaks out on the right side...

Also, in the responsive part, if you move the mouse to the submenu directly it disappears, moving the mouse in "L" shape pattern, down to the empty area under the menu, and then to the left to the submenu works because of the padding I added. So I would appreciate if someone explains how to fix that too...

Can someone help to make the submenu still maintain a good width to show all text but restricted to the window? if needed the menu should expand to the left, instead of right outside the page

EDIT:

With somdow's answer, it improves thing for the full mode, but the second mode still has an issue (the L shape thing but reverse this time) see the following gif:

enter image description here

Upvotes: 1

Views: 1622

Answers (1)

somdow
somdow

Reputation: 6318

IF i understand you correctly, then all I did was, go to nav ul ul, and add

  right: 0px;

and that's it. Now obviously you can play with the numbers but this should work and your menu wont hide off page any more.

like this(I took this from your code on codepen)

nav ul ul{
  position: absolute;
  top: 90px;
  border-top: 3px solid cyan;
  opacity: 0;
  visibility: hidden;
  transition: top .1s;

  right:0px;
}

Add the last line and you are done.

came out like this: enter image description here

happy coding

Upvotes: 2

Related Questions