NewStats: 3,264,247 , 8,183,121 topics. Date: Tuesday, 10 June 2025 at 10:47 AM 1x544

6z3e3g

How Will You Create This Menu? - (2) - Nairaland 3n4517

How Will You Create This Menu? (8722 Views)

(4)

Go Down)

tr3y(m): 5:42pm On May 25, 2015
Funny people full NL ah zswear
pak: 7:43pm On May 25, 2015
@OP, although the method is deprecated and no longer advised by desigm professionals but if you're out of time and patience, just use tables. A one row table with multiple columns and zero cell margin. Make the background image the table bg and set cell borders to relect the design. Alternatively, you can make it two rows, the upper for the images, the lower for the text. Just play around with it and you'll be done in like 10 to 20 mins
adewasco2k(m): 7:52pm On May 25, 2015
this is just too easy to accomplish but trust me there are different ways to do it. but since there is no time helping you out, just look up the source code of the website and see how they did it

try read up svg use with external file
freenature: 7:58pm On May 25, 2015
kalindaminda:


It doesn't take hours. Fireworks?

That's if you are reusing css codes,
Urine: 8:05pm On May 25, 2015
CyberWolf:
That's why I prefer Networking to this web design ish/coding angry very very frustrating..OP nobody will give you a direct hint on how this was done..just use trial & error means. It might take you hours or days..don't run mad ooh grin

Lool, on the contrary it's quite easy, you just have to know how to use Google and Stackoverflow effectively.
CyberWolf: 8:30pm On May 25, 2015
Urine:


Lool, on the contrary it's quite easy, you just have to know how to use Google and Stackoverflow effectively.
see as you just made it sound easy..the debugging process is really a nightmare to me..my
Life is easier and meaningful now I'm in networking world cool
ritzytbabs(m): 8:31pm On May 25, 2015
why not take a look at the source code of the site

you'll get useful hints from there...google can then do the rest
Urine: 8:33pm On May 25, 2015
CyberWolf:
see as you just made it sound easy..the debugging process is really a nightmare to me..my
Life is easier and meaningful now I'm in networking world cool

It's not easy, nothing good comes easy but there's this orgasm like feeling you get when you successfully debug. It's the best feeling on earth.
CyberWolf: 8:37pm On May 25, 2015
Urine:


It's not easy, nothing good comes easy but there's this orgasm like feeling you get when you successfully debug. It's the best feeling on earth.
you are right...but the time wasted can be invested in other things..Anyway it's just a ion. There are so many areas of specialization in IT world..some are gifted on programming, some dbase, networking, etc..

1 Like

aperture11: 9:45pm On May 25, 2015
pak:
@OP, although the method is deprecated and no longer advised by desigm professionals but if you're out of time and patience, just use tables. A one row table with multiple columns and zero cell margin. Make the background image the table bg and set cell borders to relect the design. Alternatively, you can make it two rows, the upper for the images, the lower for the text. Just play around with it and you'll be done in like 10 to 20 mins
Don't ever use tables especially with menus, modern browsers will mess up your site especially mobile browsers. The trend is to develop for mobile first, so this is a really bad idea.

1 Like

Re: How Will You Create This Menu? by Nobody: 9:58pm On May 25, 2015
aperture11:

Don't ever use tables especially with menus, modern browsers will mess up your site especially mobile browsers. The trend is to develop for mobile first, so this is a really bad idea.

And the OP definitely asked fo a responsive solution.

I'm disappointed the OP just left.
Re: How Will You Create This Menu? by Nobody: 10:12pm On May 25, 2015
Have you ever tried to solve a mathematics problem and got hanged?
Have your teacher/lecturer solved a mathematics problem and skip so many steps?
Do you want to know whether the answer you got in solving your mathematics problem is accurate?
Are you confused about what to do next in solving a problem?
FOR YOU and ONLY YOU

NICKZOM (www.nickzom.com) is here for you in all available way.

To go straight to the Mathematics section click on www.nickzom.com/calcworldmaths.html
onyengbu: 3:07am On May 26, 2015
which part is posing the challenge, the svg icon or the css? If the svg part, go to www.icomoon.io to create the svg icons and then it and copy the svg definition file to your project and style appropriately.
beelon1020(m): 6:29am On May 26, 2015
Am not a .. Am a WebLord angry

You can achieve that in few ways.. the short cut or the long cut,
shortcut. import the image to fireworks and create the design u want at the background, the design on the one u ed was made with satin design and u can make ur icon design or u them online make sure u choose the one with transparent background so that it will blend with it when u put it on it and just apply ur hyperlinks to it.. BOOM u are done wink

Feel free to ask me questions have done many of this in the past

you can use Dreamweaver fireworks or Adobe Photoshop those are you best bet.
FRInteractives: 8:37am On May 26, 2015
We provide exceptional SAP training whether at End , Super , or Consultancy levels for the following modules: Financial ing FI Controlling CO Materials Management MM Sales and Distribution SD Human Capital Mgt HCM/HR Project System PS Plant Maintenance PM Production Planning PP Business Intelligence BI/BW Basis Terp10 now Call us: 08059981540 08072611343 E: [email protected] Port Harcourt Office: 5 Babbe St, D- Line, PH
FRInteractives: 8:38am On May 26, 2015
Web Splash - May, 2015 FR Interactives Web Solutions is currently giving all SMEs and Business Owners here in Nigeria an opportunity to have their own professional websites designed for them professionally at an affordable rate WHAT WE WILL NEED TO GET STARTED * A profile of your company or organization. You can also send us a detailed explanation of how you want your website. * Domain Name Suggestions *Pictures, Logos of your Company (we can assist you if you don't have) REQUIREMENTS & CONDITIONS. All you need to do is get our subscription form you can get it at our Port Harcourt Office or you can request for it to be sent to you via email. FEE: We are going to be building your site at the rate of N30,000 this covers both your domain, hosting, and Promotions. Grab this opportunity while it lasts. This offer is valid all through the month of May Talk to us today Call: 2348072611343, 2348059981540 (I.e. 08072611343, 08059981540) Or visit us @ #5 Babbe Street, D/Line PH
Humorclux: 10:54am On May 26, 2015
FRInteractives:
Web Splash - May, 2015 FR Interactives Web Solutions is currently giving all SMEs and Business Owners here in Nigeria an opportunity to have their own professional websites designed for them professionally at an affordable rate WHAT WE WILL NEED TO GET STARTED * A profile of your company or organization. You can also send us a detailed explanation of how you want your website. * Domain Name Suggestions *Pictures, Logos of your Company (we can assist you if you don't have) REQUIREMENTS & CONDITIONS. All you need to do is get our subscription form you can get it at our Port Harcourt Office or you can request for it to be sent to you via email. FEE: We are going to be building your site at the rate of N30,000 this covers both your domain, hosting, and Promotions. Grab this opportunity while it lasts. This offer is valid all through the month of May Talk to us today Call: 2348072611343, 2348059981540 (I.e. 08072611343, 08059981540) Or visit us @ #5 Babbe Street, D/Line PH
I go reach Jamb office b4 i get ur side?
FRInteractives: 10:57am On May 26, 2015
Humorclux:

I go reach Jamb office b4 i get ur side?
My office is just opposite craft center sch. gate at dline
Humorclux: 11:04am On May 26, 2015
FRInteractives:
My office is just opposite craft center sch. gate at dline
I go reach there during the weekend
clementcro(m): 11:47am On May 27, 2015
This is the link, for all of you that are saying OP vanished.

http://www.montash.com/

I pasted it in my first post, i guess Seun and his guys deleted it.
pak: 2:56pm On May 27, 2015
aperture11:

Don't ever use tables especially with menus, modern browsers will mess up your site especially mobile browsers. The trend is to develop for mobile first, so this is a really bad idea.

Oh well, I initially didn't see the part where he said the menu is responsive......

However, it's obvious the OP is something of a noob and is just trying to get a hang else a trip to any bootstrap template site could have solved his problem.

Not every site is mobile first, there are some backend applications I develop that are primarily designed for desktop, mainly used to access tabular data.
In such scenario and when you are out of time and lack the technical knowhow, you might be forced to use the option available to you.

But true, tables have been discouraged for non tabular data
Re: How Will You Create This Menu? by Nobody: 5:47pm On May 27, 2015
Hmph. OYO.
clementcro(m): 8:54pm On May 27, 2015
kalindaminda:


And the OP definitely asked fo a responsive solution.

I'm disappointed the OP just left.

OGa, oya provide solution ohhh.... grin grin grin grin grin
onyengbu: 9:13pm On May 27, 2015
pak:

But true, tables have been discouraged for non tabular data
Even for tabular data, you can style your divs to display:table-cell, display:table-column and get exact effect as tables.

1 Like

onyengbu: 9:14pm On May 27, 2015
clementcro:

OGa, oya provide solution ohhh.... grin grin grin grin grin
What exactly is your challenge. Is it the css or getting the svg icons?
clementcro(m): 9:41pm On May 27, 2015
onyengbu:

What exactly is your challenge. Is it the css or getting the svg icons?

If you have been following this thread , you would know the challenge, however, incase you have not been following it, achieving that type of menu structure is the challenge.

cheers
onyengbu: 1:48am On May 28, 2015
clementcro:


If you have been following this thread , you would know the challenge, however, incase you have not been following it, achieving that type of menu structure is the challenge.

cheers
Ok, no offense but I asked because the CSS is pretty simple and I felt that if it was getting the svg icons that is the problem, then you should visit https://icomoon.io and generate it.

Then the CSS

nav{
display: table;
padding:0;
margin:0;
background:#333;
border-top:3px solid #936;
overflow:auto;
width:100%;
}
nav ul{
list-style-position:none;
width:100%;
display:table-row;
}
nav ul li{
display: table-cell;
width:16.5%;
border-left:1px solid #666;
vertical-align:middle;
}
nav ul li:first-child{
border-left:none;
}
nav ul li a{
padding:20px;
font-size:16px;
text-align:center;
color:#ddd;
display:block;
text-transform:uppercase;
text-decoration:none;
}
nav ul li a svg.icon{
display:inline-block;
font-size:30px;
color:#0CC;
}
nav ul li a span{
display:block;
clear:both;
}

.icon {
display: inline-block;
width:1.09em;
height:1.09em;
line-height:1;
fill: currentColor;
}

The HTML

<nav>
<ul>
<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-bi"></use></svg> <span>Bi, Data & Analytics</span>
</a>
</li>

<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-erp"></use></svg> <span>ERP CRM</span>
</a>
</li>

<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-security"></use></svg> <span>Information Security</span>
</a>
</li>

<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-architecture"></use></svg> <span>Architecture & Stratergy</span>
</a>
</li>

<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-energy"></use></svg> <span>Energy Technology</span>
</a>
</li>

<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-technology"></use></svg> <span>Information Technology</span>
</a>
</li>

</ul>
</nav>

The HTML above assumes that you named the svg file generated from icomoon, svgdefs.svg and it is inside the same directory as the HTML file.
Also the line <use xlink:href="svgdefs.svg#icon-technology"> for example assumes that the icon for Information Technology Menu is linked to #icon-technology in the svg definition file so be ready to modify that part to suit what you generated.
Again I did not specify the @fontface for the font used for that menu.
clementcro(m): 8:13pm On May 30, 2015
onyengbu:

Ok, no offense but I asked because the CSS is pretty simple and I felt that if it was getting the svg icons that is the problem, then you should visit https://icomoon.io and generate it.

Then the CSS

nav{
display: table;
padding:0;
margin:0;
background:#333;
border-top:3px solid #936;
overflow:auto;
width:100%;
}
nav ul{
list-style-position:none;
width:100%;
display:table-row;
}
nav ul li{
display: table-cell;
width:16.5%;
border-left:1px solid #666;
vertical-align:middle;
}
nav ul li:first-child{
border-left:none;
}
nav ul li a{
padding:20px;
font-size:16px;
text-align:center;
color:#ddd;
display:block;
text-transform:uppercase;
text-decoration:none;
}
nav ul li a svg.icon{
display:inline-block;
font-size:30px;
color:#0CC;
}
nav ul li a span{
display:block;
clear:both;
}

.icon {
display: inline-block;
width:1.09em;
height:1.09em;
line-height:1;
fill: currentColor;
}

The HTML

<nav>
<ul>
<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-bi"></use></svg> <span>Bi, Data & Analytics</span>
</a>
</li>

<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-erp"></use></svg> <span>ERP CRM</span>
</a>
</li>

<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-security"></use></svg> <span>Information Security</span>
</a>
</li>

<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-architecture"></use></svg> <span>Architecture & Stratergy</span>
</a>
</li>

<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-energy"></use></svg> <span>Energy Technology</span>
</a>
</li>

<li>
<a href="#">
<svg class="icon"><use xlink:href="svgdefs.svg#icon-technology"></use></svg> <span>Information Technology</span>
</a>
</li>

</ul>
</nav>

The HTML above assumes that you named the svg file generated from icomoon, svgdefs.svg and it is inside the same directory as the HTML file.
Also the line <use xlink:href="svgdefs.svg#icon-technology"> for example assumes that the icon for Information Technology Menu is linked to #icon-technology in the svg definition file so be ready to modify that part to suit what you generated.
Again I did not specify the @fontface for the font used for that menu.
Thanks Onyegbu, I really appreciate your time, but I want to do mine the same way it was done on that website, EXACTLY, they use <svg></svg> tags if you checked the source code
onyengbu: 2:08am On May 31, 2015
clementcro:

Thanks Onyegbu, I really appreciate your time, but I want to do mine the same way it was done on that website, EXACTLY, they use <svg></svg> tags if you checked the source code
Are you saying I didnt use svg tags too?
rockfortdigital: 3:42pm On Oct 04, 2021
clementcro:
Hi everyone, I would like to get an idea of how someone can create this menu, the menu is responsive and done with SVG, CSS, but I dont know how.

You can see the full menu on the website here.

Please only professionals who have ideas should comment.

THanks


For a Wordpress site, it is simple.

That is a mega menu

Reply)

Review Of Basket Mouth's Website

(Go Up)

Sections: How To . 59
Disclaimer: Every Nairaland member is solely responsible for anything that he/she posts or s on Nairaland.