Ovako, prateći jedan tutorial napravio sam menu. Doduše, sada nije nešto posebno ukrašen niti sređen ali to ću poslije uraditi. Menu je u 2 reda. Ono što sada pokušavam da napravim ali mi nikako ne ide, je da postavim ikonu pored svake menu stavke. Imam set ikona, i za svaki link hocu da postavim posebnu ikonu, lijevo od menua.
Evo koda.
Menu bi trebao da izgleda kao i na ovom linku http://css-tricks.com/flexbox-bar-navigation/ samo bez ovog jquery efekta.
Hvala
Evo koda.
Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<div id="wrapper">
<div id="header_wrapper">
<div id="header">
<div id"logo">
</div>
<div id="nav_wrapper">
<ul class="navigation">
<li><a href="#"><strong>Home</strong><span>Visit my home</span></a></li>
<li><a href="#"><strong>Portfolio</strong><span>My works</span></a></li>
<li><a href="#"><strong>Contact</strong><span>Send me message</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>
<body>
<div id="wrapper">
<div id="header_wrapper">
<div id="header">
<div id"logo">
</div>
<div id="nav_wrapper">
<ul class="navigation">
<li><a href="#"><strong>Home</strong><span>Visit my home</span></a></li>
<li><a href="#"><strong>Portfolio</strong><span>My works</span></a></li>
<li><a href="#"><strong>Contact</strong><span>Send me message</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Code:
body {
}
#header_wrapper {
height:80px;
}
#header {
height:80px;
width:700px;
margin:0 auto;
background: #666;
}
#logo{
height:80px;
width:100px;
float:left;
}
#nav_wrapper {
float:right;
height:80px;
width:600px;
}
ul.navigation {
list-style:none;
margin-right:25px;
}
.navigation li {
float:right;
font-family: arial;
margin-left:80px;
color:#fff;
}
.navigation li strong {
display:block;
}
.navigation li span {
display:block;
color :#ddd;
margin-left:-10px;
}
.navigation li a {
text-decoration:none;
}
.navigation li a:hover {
color:#fff;
}
body {
}
#header_wrapper {
height:80px;
}
#header {
height:80px;
width:700px;
margin:0 auto;
background: #666;
}
#logo{
height:80px;
width:100px;
float:left;
}
#nav_wrapper {
float:right;
height:80px;
width:600px;
}
ul.navigation {
list-style:none;
margin-right:25px;
}
.navigation li {
float:right;
font-family: arial;
margin-left:80px;
color:#fff;
}
.navigation li strong {
display:block;
}
.navigation li span {
display:block;
color :#ddd;
margin-left:-10px;
}
.navigation li a {
text-decoration:none;
}
.navigation li a:hover {
color:#fff;
}
Menu bi trebao da izgleda kao i na ovom linku http://css-tricks.com/flexbox-bar-navigation/ samo bez ovog jquery efekta.
Hvala