navbar Full Width Menu

[rareyush]

hi everyone

 

I am trying get a full width sub-menu on 3rd item in menu or navbar which is coming from a loop.

i was hoping this can be done by using jquery by targeting 3rd element in navbar but jquery is blocked in some browser by default so is there any other method I can do this

[Ivan Gretsky]

Happy new year, @rareyush! And yes, we are still celebrating here in Russia)

As I got it, you want a menu kind of like on this site (you can look at some css to get inspiration, but js is also involved there).

I think, you can achieve it with css-only. But I would not bother too much for full capability for no-js users these days. Provide some (possibly ugly) fallback to keep the site usable.

Here is a nice link to start with css-only menus as a bonus)

[lokomotivan]

How's jquery blocked in some browsers by default?

Anyways, you can achieve this with just css, something like this (well this is way over simplified):

<ul class="my-menu">
  <li><a>item 1</a></li>
  <li><a>item 2</a></li>
  <li>
    <a>item 3</a>
    <ul class="submenu">
        <li>submenu item</li>
        <li>submenu item</li>
    </ul>
  </li>
  <li><a>item 4</a></li>
</ul>

<style>
  .my-menu > li:nth-child(3) > .submenu {
  	width:100%;
  }
</style>

 

[rareyush]

  On 1/5/2018 at 10:04 AM, lokomotivan said:

How's jquery blocked in some browsers by default?

Anyways, you can achieve this with just css, something like this (well this is way over simplified):

<ul class="my-menu">
  <li><a>item 1</a></li>
  <li><a>item 2</a></li>
  <li>
    <a>item 3</a>
    <ul class="submenu">
        <li>submenu item</li>
        <li>submenu item</li>
    </ul>
  </li>
  <li><a>item 4</a></li>
</ul>

<style>
  .my-menu > li:nth-child(3) > .submenu {
  	width:100%;
  }
</style>

 

Expand  

my seniors told me that jquery is blocked in some browsers that's why try not use too much of jqueries

but I am using loop and all the childrens are coming from a loop

and i want full width menu on 3rd menu only not others, because 3rd menu is the only menu who has many submenus

 

  On 1/5/2018 at 9:59 AM, Ivan Gretsky said:

Happy new year, @rareyush! And yes, we are still celebrating here in Russia)

As I got it, you want a menu kind of like on this site (you can look at some css to get inspiration, but js is also involved there).

I think, you can achieve it with css-only. But I would not bother too much for full capability for no-js users these days. Provide some (possibly ugly) fallback to keep the site usable.

Here is a nice link to start with css-only menus as a bonus)

Expand  

Thank you I'm reading