NewStats: 3,261,278 , 8,173,597 topics. Date: Wednesday, 28 May 2025 at 06:13 PM 3x282l

6z3e3g

How Will You Create This Menu? - - Nairaland 264x2o

How Will You Create This Menu? (8702 Views)

(4)

(1) Go Down)

clementcro(m): 8:23am On May 23, 2015
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

1 Share

Re: How Will You Create This Menu? by Nobody: 2:35pm On May 23, 2015
Please only professionals who haveideas should comment.
you go old

8 Likes

Re: How Will You Create This Menu? by Nobody: 2:46pm On May 23, 2015
Please only professionals who haveideas should comment.
you go old
webzyweb(m): 12:20am On May 24, 2015
First you can create a div and give it a class and also specify a background image.

then create a class for the icons and the list items value.

in the class for the li items you will create, give it a right-border of your choice pixels.

<div class="nav">
<ul>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
</ul>
</div>


for futher help and for website design and development, me using my details at my signature BELOW:

8 Likes 1 Share

Humorclux: 12:47am On May 24, 2015
i think those icons are fon-awesome.
You should uber menu. making this kinda menu with uber menu is alot easier and safer than injecting the code straight at your header.php
clementcro(m): 11:32am On May 25, 2015
Thanks for the atempt to help , but this wont help, try and visit the link i posted.
Those objects showing are not images, they are SVG.

Thanks though

webzyweb:
First you can create a div and give it a class and also specify a background image.

then create a class for the icons and the list items value.

in the class for the li items you will create, give it a right-border of your choice pixels.

<div class="nav">
<ul>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
</ul>
</div>


for futher help and for website design and development, me using my details at my signature BELOW:

clementcro(m): 11:32am On May 25, 2015
Thanks

Humorclux:
i think those icons are fon-awesome.
You should uber menu. making this kinda menu with uber menu is alot easier and safer than injecting the code straight at your header.php
baybeeboi: 4:23pm On May 25, 2015
okay, i know all this things
Neduzze5(m): 4:23pm On May 25, 2015
Watch and learn cool
dataplus87(m): 4:24pm On May 25, 2015

1stola: 4:25pm On May 25, 2015
JUST PRESS:
Wǒ xiǎng chī wǒ xiǎng xī mǔrǔ. Wǒ xūyào yīgè gānjìng
qīngxīn de niánqīng yīndào sǎoshè. Wǒ xiǎng chī wǒ xiǎng
xī mǔrǔ. Wǒ xūyào yīgè gānjìng qīngxīn de niánqīng yīndào
sǎoshè. Wǒ xiǎng chī wǒ xiǎng xī mǔrǔ. Wǒ xūyào yīgè
gānjìng qīngxīn de niánqīng yīndào sǎoshè. Wǒ xiǎng chī
wǒ xiǎng xī mǔrǔ. Wǒ xūyào yīgè gānjìng qīngxīn de
niánqīng yīndào sǎoshè. Wǒ xiǎng chī wǒ xiǎng xī mǔrǔ.
Wǒ xūyào yīgè gānjìng qīngxīn de niánqīng yīndào sǎoshè.
我想吃我想吸母乳。我需要一個乾淨清新的年輕陰
道掃射。我想吃我想吸母乳。我需要一個乾淨清新
的年輕陰道掃射。我想吃我想吸母乳。我需要一個
乾淨清新的年輕陰道掃射。我想吃我想吸母乳。我
需要一個乾淨清新的年輕陰道掃射。我想吃我想吸
母乳。我需要一個乾淨清新的年輕陰道掃射。
GOODLUCK.

5 Likes 1 Share

Osyxcel(m): 4:30pm On May 25, 2015
Mah stop here
Re: How Will You Create This Menu? by Nobody: 4:30pm On May 25, 2015
webzyweb:
First you can create a div and give it a class and also specify a background image.

then create a class for the icons and the list items value.

in the class for the li items you will create, give it a right-border of your choice pixels.

<div class="nav">
<ul>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
</ul>
</div>


for futher help and for website design and development, me using my details at my signature BELOW:


That syntax is wrong.

OP, style the background image in the CSS.

2 Likes

Re: How Will You Create This Menu? by Nobody: 4:31pm On May 25, 2015
Humorclux:
i think those icons are fon-awesome.
You should uber menu. making this kinda menu with uber menu is alot easier and safer than injecting the code straight at your header.php

It's not font awesome. Those are images.

1 Like

Re: How Will You Create This Menu? by Nobody: 4:31pm On May 25, 2015
OP, take a look at the source code of the thing you want to copy.
bastien: 4:32pm On May 25, 2015
Add this to your widget #####123475gshdjdggdbjkrjnfbdjjfbfjfbfbhfnd#####


You are good to go

Note: the way I gave is the newest version
Ewizard(m): 4:34pm On May 25, 2015
learning..
deloon(m): 4:39pm On May 25, 2015
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

Couldn't find the link.

1 Like

freenature: 4:43pm On May 25, 2015
you can actually make them, though it takes hours to perfect, you can using fireworks and also CSS codes you can achieve it.
Re: How Will You Create This Menu? by Nobody: 4:47pm On May 25, 2015
freenature:
you can actually make them, though it takes hours to perfect, you can using fireworks and also CSS codes you can achieve it.

It doesn't take hours. Fireworks?
abdul4me(m): 4:48pm On May 25, 2015
I sometimes like to use font-awesome for my icons, No size limitation, faster page load, unlimited color and transitions at your choice.

Free Font-Awesome (icons) and documentation from https://github.com/FortAwesome/Font-Awesome.
You can also see the demonstration @ http://fortawesome.github.io/Font-Awesome/icons/

Create your navigation HTML
<navi id='my_menu_id'>
<ul id="my_navi_id">
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
</ul>
</navi>

Replace fa-xxxxxx with choice image (example are at http://fortawesome.github.io/Font-Awesome/icons/ )

1 Like 1 Share

CyberWolf: 4:50pm On May 25, 2015
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
Re: How Will You Create This Menu? by Nobody: 4:52pm 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

OP vanished. All he has to do it show us the link and someone will copy and paste the source code and CSS for him/her.

2 Likes

CyberWolf: 4:55pm On May 25, 2015
kalindaminda:


OP vanished. All he has to do it show us the link and someone will copy and paste the source code and CSS for him/her.
yea u are right..I think ctrl u will open the source code .. Can't
omanifrank(m): 4:58pm On May 25, 2015
brb
tsdarkside(m): 4:58pm On May 25, 2015
webzyweb:
First you can create a div and give it a class and also specify a background image.

then create a class for the icons and the list items value.

in the class for the li items you will create, give it a right-border of your choice pixels.

<div class="nav">
<ul>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
<li><"icon img src"></br><a href="link1"</a></li>
</ul>
</div>


for futher help and for website design and development, me using my details at my signature BELOW:


grin grin grin grin
wale: 4:59pm On May 25, 2015
Op

Can you play around with this. I can not see any link in your post and I am actually in a hurry.

<nav id='menu'>
<ul>
<li class='home'>
<a href='/'><i class="fa fa-?? "></i> Home</a></li>
<li><a href=’Link 1><i class="fa fa-??"></i> BI DATA ANALYTICS</a></li>
<li><a href='Link3'><i class="fa fa-?? "></i> ERP CRM </a>
</li>
….
….
….
</ul></nav>
ClintonNzedimma(m): 4:59pm On May 25, 2015
This easy something
Vicotex(m): 5:01pm On May 25, 2015
This is css3 at work .
I told the op to use Font-awsome to achieve this menu but he ignored it

1 Like

coldHeat: 5:06pm On May 25, 2015
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


Dude where is the link to the website?
abdul4me(m): 5:10pm On May 25, 2015
Vicotex:
This is css3 at work .
I told the op to use Font-awsome to achieve this menu but he ignored it
I gave the details for using the font-awesome here. I feel its one of the best options out there.

abdul4me:
I sometimes like to use font-awesome for my icons, No size limitation, faster page load, unlimited color and transitions at your choice.

Free Font-Awesome (icons) and documentation from https://github.com/FortAwesome/Font-Awesome.
You can also see the demonstration @ http://fortawesome.github.io/Font-Awesome/icons/

Create your navigation HTML
<navi id='my_menu_id'>
<ul id="my_navi_id">
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
<li><a href="my_link.htm"><i class="fa fa-xxxxxx"></i> anchor</a></li>
</ul>
</navi>

Replace fa-xxxxxx with choice image (example are at http://fortawesome.github.io/Font-Awesome/icons/ )
InZA: 5:12pm On May 25, 2015
1stola:
JUST PRESS:
Wǒ xiǎng chī wǒ xiǎng xī mǔrǔ. Wǒ xūyào yīgè gānjìng
qīngxīn de niánqīng yīndào sǎoshè. Wǒ xiǎng chī wǒ xiǎng
xī mǔrǔ. Wǒ xūyào yīgè gānjìng qīngxīn de niánqīng yīndào
sǎoshè. Wǒ xiǎng chī wǒ xiǎng xī mǔrǔ. Wǒ xūyào yīgè
gānjìng qīngxīn de niánqīng yīndào sǎoshè. Wǒ xiǎng chī
wǒ xiǎng xī mǔrǔ. Wǒ xūyào yīgè gānjìng qīngxīn de
niánqīng yīndào sǎoshè. Wǒ xiǎng chī wǒ xiǎng xī mǔrǔ.
Wǒ xūyào yīgè gānjìng qīngxīn de niánqīng yīndào sǎoshè.
我想吃我想吸母乳。我需要一個乾淨清新的年輕陰
道掃射。我想吃我想吸母乳。我需要一個乾淨清新
的年輕陰道掃射。我想吃我想吸母乳。我需要一個
乾淨清新的年輕陰道掃射。我想吃我想吸母乳。我
需要一個乾淨清新的年輕陰道掃射。我想吃我想吸
母乳。我需要一個乾淨清新的年輕陰道掃射。
GOODLUCK.


This is the craziest shiii I've seen this week..... I've just been laughing since!!!

I can't even see the screen well to type because I can't laugh while my eyes are open.

(1) Reply)

Post All Your Web Development Issues Here (php, Sql, Html, Javascript, Css)

(Go Up)

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