Mega Drop Down

Home Forums Older releases 1.0.x Mega Drop Down

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #2733
    roberteau
    Participant

    Hello,

    I’m new to smart menus and CSS…. and im trying to add Unordered List inside the Mega drop down:
    I want to achieve something like http://postimg.org/image/hsthui5wz/
    categories sitting next to each other with different links inside blocks.

    can you please give me a starting point?

    thanks

    #2738
    admin
    Keymaster

    Hi,

    Here is a basic example. Of course, you will need to add more styles for the headings, links, etc. but the layout part should be OK:

    HTML:

    ...
    <li><a href="#">Mega menu</a>
      <ul class="mega-menu">
        <li>
          <div class="row">
            <div class="col">
              <h2>Heading</h2>
              <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
              </ul>
            </div>
            <div class="col">
              <h2>Heading</h2>
              <ul>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
                <li><a href="#">Link</a></li>
              </ul>
            </div>
          </div>
        </li>
      </ul>
    </li>
    ...

    CSS:

    .mega-menu .row {
    	width: 500px;
    	max-width: 100%;
    }
    .mega-menu .row:after {
    	content: '';
    	display: block;
    	clear: both;
    	height: 0;
    	overflow: hidden;
    }
    .mega-menu .col {
    	float: left;
    	padding: 10px;
    	width: 50%;
    }
    .mega-menu, .mega-menu ul {
    	width: auto !important;
    	min-width: 0 !important;
    	max-width: none !important;
    }
    .mega-menu ul {
    	position: static;
    	display: block !important;
    }
    .mega-menu ul li {
    	/* ... */
    }
    .mega-menu ul a {
    	/* ... */
    }

    Cheers!

    #2740
    roberteau
    Participant

    Thank you so much man, this is really helpful. cheers

Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.

Register

You will be emailed a link to set your password.

Login

Lost password?