What's new
Symbianize Forum

Most of our features and services are available only to members, so we encourage you to login or register a new account. Registration is free, fast and simple. You only need to provide a valid email. Being a member you'll gain access to all member forums and features, post a message to ask question or provide answer, and share or find resources related to mobile phones, tablets, computers, game consoles, and multimedia.

All that and more, so what are you waiting for, click the register button and join us now! Ito ang website na ginawa ng pinoy para sa pinoy!

[help] web design how to make my submenu look 3 columns coding

WatchmeNaeNae

WatchmeNaeNae

The Devotee
Advanced Member
Messages
350
Reaction score
0
Points
26
I need your help guys paano ko magiging 3 columns yung submenu ko.
submenu.png


Gusto ko Sanang parang maging ganito itsura ng submenu ko. Naka 3 columns yung categories ko.
3columns.png


Eto po yung code nya. Pa disect naman po paano gagawin ko Pls PLs :( I'll Pm you po kung sino man gustong makatulong para mapakita ko buong source code

<!-- TABS MENU<div id='topwrapper'>
<ul id='topbar'>
<li><a class='trigger' href='#'><span>Pop Jazz</span>Fusion and folk</a>
<ul>
<li class='hr'/>
<li><a href='#'>Free jazz</a></li>
<li class='hr'/>
<li><a href='#'>Jazz fusion</a></li>
<li class='hr'/>
<li><a href='#'>Smooth jazz</a></li>
<li class='hr'/>
<li><a href='#'>Cafe jazz</a></li>
</ul></li>
<li><a class='trigger' href='#'><span>Rock 'n Pop</span>Stylist listening</a>
<ul>
<li class='hr'/>
<li><a href='#'>Oldest Pop</a></li>
<li class='hr'/>
<li><a href='#'>Neo Pop</a></li>
<li class='hr'/>
<li><a href='#'>Smooth Pop</a></li>
<li class='hr'/>
<li><a href='#'>Punk and Ska</a></li>
<li class='hr'/>
<li><a href='#'>Reggae and Hip Hop</a></li>
</ul>
</li>
<li><a class='trigger' href='#'><span>Neo Rock</span>Heavy Metal</a>
<ul>
<li class='hr'/>
<li><a href='#'>Sweet Metal</a></li>
<li class='hr'/>
<li><a href='#'>Speed Metal</a></li>
<li class='hr'/>
<li><a href='#'>Symphonic Metal</a></li>
<li class='hr'/>
<li><a href='#'>Alternative</a></li>
<li class='hr'/>
<li><a href='#'>Black Metal</a></li>
</ul>
</li>
<li><a href='#'><span></span>Sound heart</a></li>
<li><a class='trigger' href='#'><span>Old Music</span></a>
<ul>
<li class='hr'/>
<li><a href='#'>Country</a></li>
<li class='hr'/>
<li><a href='#'>Latin</a></li>
<li class='hr'/>
<li><a href='#'>Dangdut</a></li>
<li class='hr'/>
<li><a href='#'>Hindi</a></li>
<li class='hr'/>
<li><a href='#'>Chinese</a></li>
</ul>
</li>
</ul>
Click to expand...
 
Last edited:
sub menu

source

html

http://alijafarian.com/bootstrap-multi-column-dropdown-menu/

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!--/.navbar-header-->

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">One Column <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Two Column <b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-2">
<div class="row">
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here that's extra long so we can see how it looks</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-sm-6">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Three Column <b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</div>
</div>
</ul>
</li>
<li><a href="#">Link</a></li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
<!--/.navbar-->
Click to expand...

css

.dropdown-menu {
min-width: 200px;
}
.dropdown-menu.columns-2 {
min-width: 400px;
}
.dropdown-menu.columns-3 {
min-width: 600px;
}
.dropdown-menu li a {
padding: 5px 15px;
font-weight: 300;
}
.multi-column-dropdown {
list-style: none;
}
.multi-column-dropdown li a {
display: block;
clear: both;
line-height: 1.428571429;
color: #333;
white-space: normal;
}
.multi-column-dropdown li a:hover {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}

@media (max-width: 767px) {
.dropdown-menu.multi-column {
min-width: 240px !important;
overflow-x: hidden;
}
}
Click to expand...

js
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
Click to expand...
 
ai grabe d ko magets -_- Hahaha
 
Working Demo


HTML:


<nav class="menu-nav" role="navigation">
<ul class="menu-nav__list">
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 1</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 2</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 3 Menu 3</a>
</li>
</ul>
<ul class="menu-nav__list">
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 1</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 2</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 3</a>
</li>
</ul>
<ul class="menu-nav__list">
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 1</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 2</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 3</a>
</li>
</ul>
</nav>


CSS:

.menu-nav {
display: flex;
width: 500px;
padding: 0 30px;
border: 1px solid black;
}
.menu-nav__list {
flex: 1;
padding: 0;
list-style: none;
}
.menu-nav__item {
display: block;
}
.menu-nav__link {
display: block;
margin: 15px 0;
}
 
Last edited:
beaujoylee said:
Working Demo


HTML:


<nav class="menu-nav" role="navigation">
<ul class="menu-nav__list">
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 1</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 2</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 3 Menu 3</a>
</li>
</ul>
<ul class="menu-nav__list">
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 1</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 2</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 3</a>
</li>
</ul>
<ul class="menu-nav__list">
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 1</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 2</a>
</li>
<li class="menu-nav__item">
<a href="#" class="menu-nav__link">Menu 3</a>
</li>
</ul>
</nav>


CSS:

.menu-nav {
display: flex;
width: 500px;
padding: 0 30px;
border: 1px solid black;
}
.menu-nav__list {
flex: 1;
padding: 0;
list-style: none;
}
.menu-nav__item {
display: block;
}
.menu-nav__link {
display: block;
margin: 15px 0;
}
Click to expand...

can you please help me :( nasisira po yung itsura nung site ko kapag inaapply ko na sya :(
 
You must log in or register to reply here.

Similar threads

emaxx18
HELP!!! Menu List With Submenus
Replies
0
Views
544
emaxx18
emaxx18
ynallilaw
[need help!] navigation bar prob *blogger
Replies
3
Views
412
raymundpogi
raymundpogi
B
my asked lang po ako bakit kaya nalalagyan nila ng javascript ?
Replies
4
Views
714
kagidka
kagidka
O
[HELP] How to fetch list of users with my code
Replies
4
Views
2K
JCLeonardo
J
Back
Top Bottom