Place div daughter element ul li occupying 100% of page width

Asked

Viewed 773 times

1

The problem is this: I have a div who is daughter of a li element of a ul that does not start in the corner of the page. There are two subproblems:

1 - I need to be able to expand this div so that it occupies the full width of the resolution-independent page.

2 - I need it to always occupy the width when I give scroll.

Structure:

Estrutura:
     <ul class="main-menu">
     	<li class="menu-item nossos-hoteis">
	   <a class="menu-link" href=""><span>Nossos Hotéis</span></a>
	      <div class="submenu">
     	</li>
     </ul>

CSS:

/* submenu */

display: none;
position: absolute;
width: 872px;
height: 500px;
padding: 20px 30px;

/* main-menu */

.main-nav .main-menu {
   display: none;
   list-style: none;
   padding: 0;
   margin: 0;
}

/* menu-item */

.main-nav .main-menu>.menu-item {
   display: table-cell;
   height: inherit;
   position: relative;
   text-align: center;
   padding: 0 15px;
}

The solution I was trying so far was too gambiarrada that was to put the div with the width of the screen in JQUERY and set left negative depending on range of resolution. Resolve, resolve 1 but I think there may be better solution because when I scroll the screen to be set a left manual div ceases to occupy the whole screen.

javascript jquery css front-end div

  • Structure: <ul> <li> <div class="submenu"> CSS: display: None; position: Absolute; width: 872px; height: 500px; padding: 20px 30px;

  • 1

    Welcome home, I could edit your question and put this code in it ? To format the code just select it and hit the hot key CTRL+K, enjoy and make the Tour.

  • To get an appropriate answer you should include in the question the CSS that both the <ul> like the <li> has, which will somehow turn the question code into a verifiable example of the problem.

  • That’s complicated, because this div is inside an UL that is not in the corner of the screen. I think it only goes on the basis of a treatment (of the gambiarra) via jQuery same.

1 answer

0

From what I understand of your question you want me to div submenu occupy the entire width of the preview window, correct? I did it in a very simple way, without Javascript/jQuery, with the following css:

.submenu {
    position: absolute;  
    width: calc(100vw + 15px);
    left: -15px;
}

I went to the submenu that it starts at minus 15px (padding of ul) and that it viewport width (view window width) plus 15px moved. You can see how it looked in an example below:

.submenu {
  position: absolute;  
  width: calc(100vw + 15px);
  left: -15px;
  
  /* Apenas para ser visto */
  height: 100px;
  background: navy;
}
<ul class="main-menu">
  <li class="menu-item nossos-hoteis">
	   <a class="menu-link" href=""><span>Nossos Hotéis</span></a>
	   <div class="submenu"></div>
  </li>
</ul>

Browser other questions tagged javascript jquery css front-end div

You are not signed in. Login or sign up in order to post.