Custom Navigation bar

[Crow]

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

[scootergrisen]

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.

Kode: Vælg alt

<?php

    require_once 'menu.php';

?>

[Crow]

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

[cristian]

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

Dont use pictures to create a navigation bar, unless you have a exceptional good reason to.
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.

[Crow]

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

[cristian]

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 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.
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.

[Crow]

something similar to this, or how they made the navigationbar on this website especially how the search field was made.

[scootergrisen]

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.

Kode: Vælg alt

width: 200px;
background-image: url(a.png);
background-position: -200px 0;

Have a look at this : http://netkoder.dk/netkoder/css_transit ... ition_demo

[cristian]

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

All the following examples are very crude, and is just to give an idea of how you can achive the different effects.

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>

The second one is pretty close? Or something in that manner

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 third and fourth one i dont know on the top of my head.

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>

And for the rounded corners, set border-radius to 10px on the hover effect.

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%);

The eight one im not sure of, but i definitely know its possible with CSS3.
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.

[Crow]

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

[cristian]

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

Ask away, if i can help i will try