Custom Navigation bar
Greeting's
I would like to ask if anyone know's how to make a custom navigation bar by using Photoshop or paint etc. to make the bar and then how you include it in your website without using CMS but how and where you include it
i would be very gratefull and happy if you could just show me to a step-by-step guide or tell me how
I would like to ask if anyone know's how to make a custom navigation bar by using Photoshop or paint etc. to make the bar and then how you include it in your website without using CMS but how and where you include it
i would be very gratefull and happy if you could just show me to a step-by-step guide or tell me how
- scootergrisen
- Moderator
- Indlæg:709
- Tilmeldt:21. jun 2012, 23:40
- Kontakt:
Re: Custom Navigation bar
Depending on what you want it might be faster to have the menu without using images and only use HTML and CSS.
That will also make it easier to change the menu instead of having to use your image program to change the text on the images.
You put the HTML code in a file.
Then using PHP you include that file on all your pages so you will have the same menu on all the pages.
That will also make it easier to change the menu instead of having to use your image program to change the text on the images.
You put the HTML code in a file.
Then using PHP you include that file on all your pages so you will have the same menu on all the pages.
Kode: Vælg alt
<?php
require_once 'menu.php';
?>
Re: Custom Navigation bar
that is not what i meant
what i would like to know is how to make a "custom navigation bar" by using picture's etc. something similar to what they did with these example's:
http://static7.depositphotos.com/121615 ... ar-Set.jpg
but also how you include them since so far i have only found gues how to by using photoshop+dreamvewer+cms but i would like to do it without or at least only by using Photoshop or another painting program but i don't know how to
ps. i realy appreciate all the help you give scooter
what i would like to know is how to make a "custom navigation bar" by using picture's etc. something similar to what they did with these example's:
http://static7.depositphotos.com/121615 ... ar-Set.jpg
but also how you include them since so far i have only found gues how to by using photoshop+dreamvewer+cms but i would like to do it without or at least only by using Photoshop or another painting program but i don't know how to
ps. i realy appreciate all the help you give scooter
Re: Custom Navigation bar
Dont use pictures to create a navigation bar, unless you have a exceptional good reason to.Crow skrev:that is not what i meant
what i would like to know is how to make a "custom navigation bar" by using picture's etc. something similar to what they did with these example's:
http://static7.depositphotos.com/121615 ... ar-Set.jpg
but also how you include them since so far i have only found gues how to by using photoshop+dreamvewer+cms but i would like to do it without or at least only by using Photoshop or another painting program but i don't know how to
ps. i realy appreciate all the help you give scooter
For each picture you add, you need to make an additional HTTP-request when loading the page.
And thats just bad all around, but especially on mobile devices with 3G networks.
Use HTML5 and CSS3. You can create stunning navigation menues with these technologies, and they dont add to the HTTP-request count.
Since they are rendered instead.
Re: Custom Navigation bar
hmm ok but how would you lets say make a differently shaped button or add an arrow pointing down similar to "kurser" and "kontakt" used on this website ?
i can easily create a box with a couple button's along with a hover function but shaping the button's and adding a picture like arrow next to the word, or shaping a field for the search engine, i am quite interested in how you can make that without in some what using Photoshop etc.
please enlighten me since i am still quite new to it all but i wish to learn as much as possible
i can easily create a box with a couple button's along with a hover function but shaping the button's and adding a picture like arrow next to the word, or shaping a field for the search engine, i am quite interested in how you can make that without in some what using Photoshop etc.
please enlighten me since i am still quite new to it all but i wish to learn as much as possible
Re: Custom Navigation bar
I would be more than happy to help you, but i am not a 100% sure what you want, so its kinda hard to give examples on arrows and other elements to attach.Crow skrev:hmm ok but how would you lets say make a differently shaped button or add an arrow pointing down similar to "kurser" and "kontakt" used on this website ?
i can easily create a box with a couple button's along with a hover function but shaping the button's and adding a picture like arrow next to the word, or shaping a field for the search engine, i am quite interested in how you can make that without in some what using Photoshop etc.
please enlighten me since i am still quite new to it all but i wish to learn as much as possible
If you can make a crude sketch in for example paint, then i can maybe be of more help. It does not need to be pretty, just being able to show the idea.
Re: Custom Navigation bar
something similar to this, or how they made the navigationbar on this website especially how the search field was made.
- scootergrisen
- Moderator
- Indlæg:709
- Tilmeldt:21. jun 2012, 23:40
- Kontakt:
Re: Custom Navigation bar
Making the images in a image program is use you just make 2 images.
image 1 is for when the cursor is away and image 2 if for when the cursor is hovering over the link.
In the images you use a specefic width for each sprite.
For example you have 4 links in the menus and you want each link to be 200 pixels wide so the image you make is 800 pixels wide.
Then in CSS make the link 200 px and you can use background-image use the image and background-position to move the background.
In CSS this will show the number 2 sprite.
Have a look at this : http://netkoder.dk/netkoder/css_transit ... ition_demo
image 1 is for when the cursor is away and image 2 if for when the cursor is hovering over the link.
In the images you use a specefic width for each sprite.
For example you have 4 links in the menus and you want each link to be 200 pixels wide so the image you make is 800 pixels wide.
Then in CSS make the link 200 px and you can use background-image use the image and background-position to move the background.
In CSS this will show the number 2 sprite.
Kode: Vælg alt
width: 200px;
background-image: url(a.png);
background-position: -200px 0;
Re: Custom Navigation bar
All the following examples are very crude, and is just to give an idea of how you can achive the different effects.Crow skrev:hmm ok but how would you lets say make a differently shaped button or add an arrow pointing down similar to "kurser" and "kontakt" used on this website ?
i can easily create a box with a couple button's along with a hover function but shaping the button's and adding a picture like arrow next to the word, or shaping a field for the search engine, i am quite interested in how you can make that without in some what using Photoshop etc.
please enlighten me since i am still quite new to it all but i wish to learn as much as possible
The first one is pretty simple, something like this.
Kode: Vælg alt
<!--About us-->
<div style="background-color: red; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: center; height: 50px; display: inline-block; display: table-cell; vertical-align: middle;">
<a style="font-size: 25px;" href="#">About us</a>
</div>
Kode: Vælg alt
<div style="border-color: transparent transparent black transparent; border-style: solid; border-width: 0 80px 10px 80px; width: 0; height: 0px;"></div>
The fifth one, one for each side (left and right)
Kode: Vælg alt
<div style="border-color: transparent red transparent transparent; border-style: solid; border-width: 100px; width: 0; height: 0;"></div>
<div style="border-color: transparent transparent transparent red; border-style: solid; border-width: 100px; width: 0; height: 0;"></div>
The six one is just a hover effect of pink, with a padding set from what i can tell.
The seventh one is just rounded corners of 10px or something like that, and a background-color of greenish.
Use a gradient effect to get something that looks like the same result.
Something in the line of
Kode: Vælg alt
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, rgb(224, 251, 235)),
color-stop(1, rgb(45, 252, 169))
);
background-image: -o-linear-gradient(bottom, rgb(224, 251, 235) 0%, rgb(45, 252, 169) 100%);
background-image: -moz-linear-gradient(bottom, rgb(224, 251, 235) 0%, rgb(45, 252, 169) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(224, 251, 235) 0%, rgb(45, 252, 169) 100%);
background-image: -ms-linear-gradient(bottom, rgb(224, 251, 235) 0%, rgb(45, 252, 169) 100%);
background-image: linear-gradient(to bottom, rgb(224, 251, 235) 0%, rgb(45, 252, 169) 100%);
I know elements by default is cut at an angle, so if you stretch the border and hide the other 3. Maybe you can archive this effect?
No idea Try it out.
The last one is the same as the six one. Hover effect with a padding set.
Hope the examples helps you with some of them.
Re: Custom Navigation bar
thank's a ton
i will make some test's and experiment's with the given example's i hope i can ask again later if i should run into some question's
i will make some test's and experiment's with the given example's i hope i can ask again later if i should run into some question's
Re: Custom Navigation bar
Ask away, if i can help i will tryCrow skrev:thank's a ton
i will make some test's and experiment's with the given example's i hope i can ask again later if i should run into some question's