Funny people full NL ah zswear

@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

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

kalindaminda:


It doesn't take hours. Fireworks?

That's if you are reusing css codes,

CyberWolf:
That's why I prefer Networking to this web design ish/coding 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

Lool, on the contrary it's quite easy, you just have to know how to use Google and Stackoverflow effectively.

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

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

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

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.

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 passion. There are so many areas of specialization in IT world..some are gifted on programming, some dbase, networking, etc..

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.

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.

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

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 download it and copy the svg definition file to your project and style appropriately.

Am not a webmaster.. Am a WebLord

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 uploaded was made with satin design and u can make ur icon design or u download 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

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.

We provide exceptional SAP training whether at End User, Super User, or Consultancy levels for the following modules: Financial Accounting 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 Register now Call us: 08059981540 08072611343 E: info@frinteractives.com Port Harcourt Office: 5 Babbe St, D- Line, PH

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

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?

Humorclux:

I go reach Jamb office b4 i get ur side?

My office is just opposite craft center sch. gate at dline

FRInteractives:
My office is just opposite craft center sch. gate at dline

I go reach there during the weekend

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.

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

Hmph. OYO.

kalindaminda:


And the OP definitely asked fo a responsive solution.

I'm disappointed the OP just left.

OGa, oya provide solution ohhh....

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.

clementcro:

OGa, oya provide solution ohhh....

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

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

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.

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

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?

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