Jump to content

Full Width Menu


rareyush
 Share

Recommended Posts

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 ???

Link to comment
Share on other sites

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)

  • Thanks 1
Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

22 hours ago, 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>

 

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

 

22 hours ago, 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)

Thank you I'm reading 

 

 

Link to comment
Share on other sites

 Share

×
×
  • Create New...