Multilevel responsive menu request


#1

I use MBT responsive menu which is great but it has only 1 submenu .Can anyone share with me a multilevel responsive menu with multable submenus to apply and use in my blog…?

The menu which I look after is like this


#2

Anyone who want to share a multilevel menu with me?


#3

@Nick

This responsive menu is a step on from the CSS3 Multi-Level, Off-Canvass Mobile Menu (no JavaScript) and provides both a mobile and desktop view of the menu. You just need to follow the steps carefully on the tutorial page and all will be done just in few seconds.

Multi Level Responsive Menu

Though this technique may be well-suited to certain situations and menu structures, there are still a lot of other options out there for taming navigation on mobile devices. I hope the above tutorial will help you a lot, in case you need further help please let me know. Thanks


#4

Thanks @mybloggertricks ,I paste HTML Structure in my teplate but when I tried to save it ,it finds errors!! Please can you chech it if you have time?

I use Blogger


#5

@Nick

You are always well come bro, would you mind get me the error screenshot please? it will help me to serve you better. Thanks


#6

Ok @mybloggertricks I put HTML code above /head and it gave me this error


#7

@Nick

Sorry for trouble, just remove the highlighted code in the screenshot and then i hope it will work. In case of any error please let me know. Thanks


#8

@Nick

Copy the following Optimized HTML code, i hope it will work fine.

<div class="nav-container">
              <div>
                <label for="responsive_menu" class="responsive_menu"> <span>Menu</span> </label>
                <input id="responsive_menu" type="checkbox"/>
              <ul class="menu">
              <li><a href="#">Home</a></li>
              <li class="dropdown"><a href="#">Categoriesˇ</a>
                <ul>
                  <li><a href="#">SEO</a></li>
                  <li><a href="#">Webmaster Tools</a></li>
                  <li><a href="#">Google News</a></li>
                  <li class="dropdown"><a href="#">Web Design ›</a>     
                    <ul>
                      <li><a href="#">Social Plugin</a></li>
                      <li><a href="#">Plugins</a></li>
                      <li class="dropdown"><a href="#">Templates ›</a>
                        <ul>
                          <li><a href="#">Blogger</a></li>
                          <li><a href="#">WordPress</a></li>
                          <li><a href="#">Jomla</a></li>
                          <li><a href="#">Website Template</a></li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                  
                </ul>
              </li>
              <li class="dropdown">
              <a href="#">Tutorialsˇ</a>
              <div class="columndrop">
                <div class="col">
                  <h3>± SEO</h3>
                  <ul>
                    <li><a href="#">Basic</a></li>
                    <li><a href="#">Off Page</a></li>
                    <li><a href="#">On Page</a></li>
                    <li><a href="#">Blogger SEO</a></li>
                  </ul>
                </div>
                <div class="col">
                  <h3>± Navigation</h3>
                  <ul>
                    <li><a href="#">Website Menu</a></li>
                    <li><a href="#">Blogger Menu</a></li>
                    <li><a href="#">Wordpress Menu</a></li>
                    <li><a href="#">All in One</a></li>
                  </ul>
                </div>
                <div class="col">
                  <h3>± Plugins</h3>
                  <ul>
                    <li><a href="#">Social</a></li>
                    <li><a href="#">Blogger</a></li>
                    <li><a href="#">Wordpress</a></li>
                    <li><a href="#">Website</a></li>
                  </ul>
                </div>
              </div>
              </li>
              <li class="dropdown"><a href="#">Resourcesˇ</a>
              <div class="megadrop">
                <div class="col">
                  <h3>Graphic</h3>
                  <ul>
                    <li><a href="#">Illustrator</a></li>
                    <li><a href="#">CorelDraw Styles</a></li>
                    <li><a href="#">Adobe Plugin</a></li>
                    
                  </ul>
                </div>
                <div class="col">
                  <h3>Vector Graphic</h3>
                  <ul>
                    <li><a href="#">Vectors</a></li>
                    <li><a href="#">Icons</a></li>
                    <li><a href="#">UI Kit</a></li>
                    
                  </ul>
                </div>
                <div class="col">
                  <h3>Template</h3>
                  <ul>
                    <li><a href="#">HTML Templates</a></li>
                    <li><a href="#">Wordpress Themes</a></li>
                    <li><a href="#">Blogger Templates</a></li>
                    
                  </ul>
                </div>
                <div class="col">
                  <h3>Social Media</h3>
                  <ul>
                    <li><a href="#">Social Plugin</a></li>
                    <li><a href="#">Social Icons</a></li>
                    <li><a href="#">Social Vector Icons</a></li>
                    
                  </ul>
                </div>
               </div>
              </li>
              <li><a href="#">Faqs</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Contact Us</a></li>
              
          </ul> 
        </div>
      </div>

#9

@mybloggertricks Muhhamad I appreciate your help ,with your menu now I have the menu I looking for .Thanks again


#10

@Nick unfortunately the menu is not touch friendly i will try to share the update, how to make it touch friendly. Till then stay Mast stay Cool. Thanks


#11

@mybloggertricks I will wait for it ,thanks a lot


#12

@mybloggertricks After apply CSS code ,in some posts ,text color change from black to white…It’s very weird and I can’t find what is wrong! Can you help me to fix it?


#13

@Nick

please could you share url of the specific posts, where the error exist. It will help me to sortout the error easily. thanks.


#14

sure ,here some ‘broken’ urls

http://www.ntsotsos.gr/2009/01/nikos-damianos-tsotsos.html
http://www.ntsotsos.gr/2007/11/xilino-patoma-prin-meta.html

the text should be #333 color.

If change color here to black the issue fix but menu text color is broken!!

/* Reset Links */

.menu a, .menu a:link, .menu a:visited, .menu a:focus, span { color: #fff; text-decoration: none; }


#15

@mybloggertricks I think I fix it . I add these lines

   .menu a {color:#fff;}
.menu a:visited {color:#fff;}
.menu a:link {color:#fff;}

and then I change these.

/* Reset Links */
  .menu a:focus, span {
	color: #333;
	text-decoration: none;
}

Was my fix ok?