+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: How to code a multi column drop down menu? (/showthread.php?tid=4701795)
How to code a multi column drop down menu? - nurries - Feb 24, 2015
I've been trying to code a drop down menu with multiple columns and levels but it seems a bit out of my skill level.
This is what I'm aiming for:
[img]http://s18.postimg.org/ve4ak2j9l/Screenshot_2015_02_24_18_24_57.png[/img]
Thanks in advance for any help!
* - Sakuto - Feb 24, 2015
So what are you really looking for ? Tutorial, something to make it for you ?
Just inspect the code and watch how it's done.
* - nurries - Feb 24, 2015
A tutorial or at least some guidance in the right path would be helpful. I tried inspecting the css but I still didn't understand it well.
* - Sakuto - Feb 24, 2015
What have you done yet ? Show us your progress and the problem you encounteer.
* - nurries - Feb 24, 2015
This is what I have done so far. I want to add another column to the right saying 'Samsung' with the following sub categories (ie. Note 3, Note 4, S5 etc.) But I want it under the same dropdown menu 'shop'.
[img]http://s17.postimg.org/bre5j1qpr/Screenshot_2015_02_24_19_52_43.png[/img]
This is my code:
Code
<header id="header"><!--header-->
<div class="header_top"><!--header_top-->
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="contactinfo">
<ul class="nav nav-pills nav navbar-nav collapse navbar-collapse">
<li><a href="#"><i class="fa fa-phone"></i> +0 12 34 56 789</a></li>
<li><a href="#"><i class="fa fa-envelope"></i> [email protected]</a></li>
<!--Dropdown menu starts here--><li class="dropdown"><a href="#">Shop<i class="fa fa-angle-down"></i></a>
<ul role="menu" class="sub-menu">
<li><a href="#">Apple</a></li>
<li><a href="#">iPhone 6</a></li>
<li><a href="#">iPhone 6 Plus</a></li>
<li><a href="#">iPad Air</a></li>
<li><a href="#">iPad Mini</a></li>
</ul>
</ul>
</div>
</div> [/code]* - Sakuto - Feb 24, 2015
Code
<ul>
<li>Samsung
<ul>
<li>GS3</li>
<li>GS4</li>
</ul>
</li>
<li>Apple
<ul>
<li>4S</li>
<li>5</li>
</ul>
</li>
</ul>Make something like this and stylize it.
* - ℬasic - Feb 24, 2015
I will send over a PM to you ninopino1
* - nurries - Feb 24, 2015
(Feb 24, 2015 05:42 AM)Sakuto Wrote:Code<ul>
<li>Samsung
<ul>
<li>GS3</li>
<li>GS4</li>
</ul>
</li>
<li>Apple
<ul>
<li>4S</li>
<li>5</li>
</ul>
</li>
</ul>
Make something like this and stylize it.
I'll have a look into that and give it a shot. Thanks for your help thus far.
(Feb 24, 2015 05:43 AM)ℬasic Wrote: I will send over a PM to you ninopino1
Thank you, would really appreciate that!