praegune kellaaeg 04.07.2025 14:16:41 |
|
Hinnavaatlus
:: Foorum
:: Uudised
:: Ärifoorumid
:: HV F1 ennustusvõistlus
:: Pangalink
:: Telekavad
:: HV toote otsing
|
|
| autor |
|
Dev Grex
HV Guru
liitunud: 29.07.2012
|
06.08.2014 11:55:29
CSS ja PHP menüü lisamine WordPressi |
|
|
css:
 Spoiler
@import url(http://fonts.googleapis.com/css?family=Capriola);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
font-family: Capriola, Helvetica, sans-serif;
}
#cssmenu {
width: auto;
height: 59px;
padding-bottom: 4px;
}
#cssmenu.align-right {
float: right;
}
#cssmenu.align-right ul li {
float: right;
margin-right: 0;
margin-left: 4px;
}
#cssmenu.align-right ul li:first-child,
#cssmenu.align-right ul li:first-child > a {
border-bottom-right-radius: 3px;
}
#cssmenu #bg-one,
#cssmenu #bg-two,
#cssmenu #bg-three,
#cssmenu #bg-four {
position: absolute;
bottom: 0;
width: 100%;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
#cssmenu #bg-one {
height: 10px;
background: #0f71ba;
}
#cssmenu #bg-two {
height: 59px;
z-index: 2;
background: url('images/bg.png');
}
#cssmenu #bg-three {
bottom: 4px;
height: 55px;
z-index: 3;
background: #222222;
background: -moz-linear-gradient(top, #555555 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(100%, #222222));
background: -webkit-linear-gradient(top, #555555 0%, #222222 100%);
background: -o-linear-gradient(top, #555555 0%, #222222 100%);
background: -ms-linear-gradient(top, #555555 0%, #222222 100%);
background: linear-gradient(to bottom, #555555 0%, #222222 100%);
}
#cssmenu #bg-four {
bottom: 4px;
height: 55px;
z-index: 4;
background: url('images/bg.png');
}
#cssmenu ul {
height: 59px;
}
#cssmenu ul li {
float: left;
margin-right: 4px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
z-index: 5;
}
#cssmenu ul li a {
padding: 24px 30px 20px 30px;
margin-bottom: 4px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
color: #eeeeee;
font-size: 15px;
text-decoration: none;
}
#cssmenu ul li:first-child,
#cssmenu ul li:first-child > a {
border-bottom-left-radius: 3px;
}
#cssmenu ul li:hover,
#cssmenu ul li.active {
background: #0f71ba;
background: -moz-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3fa4f0), color-stop(100%, #0f71ba));
background: -webkit-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -o-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: -ms-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
background: linear-gradient(to bottom, #3fa4f0 0%, #0f71ba 100%);
}
#cssmenu ul li a:hover,
#cssmenu ul li.active > a {
background: url('images/bg.png');
color: #ffffff;
}
|
code:
Spoiler
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<title>CSS MenuMaker</title>
</head>
<body>
<div id='cssmenu'>
<ul>
<li class='active'><a href='#'><span>Home</span></a></li>
<li><a href='#'><span>Products</span></a></li>
<li><a href='#'><span>Company</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
</body> |
Script:
Spoiler
( function( $ ) {
$( document ).ready(function() {
$('#cssmenu').prepend('<div id="bg-one"></div><div id="bg-two"></div><div id="bg-three"></div><div id="bg-four"></div>');
});
} )( jQuery );
|
Allikas: http://cssmenumaker.com/menu/tabbed-menu
Küsimus siis järgmine, kui keerukas on selle menüü paigaldamine Wordpressi?
|
|
| Kommentaarid: 353 loe/lisa |
Kasutajad arvavad: |
   |
:: |
0 :: |
1 :: |
300 |
|
| tagasi üles |
|
 |
kuunar
Kreisi kasutaja
liitunud: 20.02.2009
|
|
06.08.2014 13:31:46
|
|
|
| Millega võrreldes?
|
|
| Kommentaarid: 14 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
13 |
|
| tagasi üles |
|
|
Dev Grex
HV Guru
liitunud: 29.07.2012
|
|
06.08.2014 18:15:40
|
|
|
| kuunar kirjutas: |
| Millega võrreldes? |
Näiteks HMTL'ga võrreldes.
Mida ma peaksin teadma, et seda kupatus tööle saada?
|
|
| Kommentaarid: 353 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
1 :: |
300 |
|
| tagasi üles |
|
|
D3ff
HV kasutaja
liitunud: 14.01.2007
|
|
06.08.2014 21:47:26
|
|
|
| Kas WordPressi enda menüüde lahendus ei sobi (Appereance > Menus)? Lohistad vajalikud lehed paika (või lisad lausa käsitsi lingid) ning edasi jääb tuunida ainult CSS?
|
|
| Kommentaarid: 7 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
0 :: |
7 |
|
| tagasi üles |
|
|
Dev Grex
HV Guru
liitunud: 29.07.2012
|
|
07.08.2014 12:56:13
|
|
|
| D3ff kirjutas: |
| Kas WordPressi enda menüüde lahendus ei sobi (Appereance > Menus)? Lohistad vajalikud lehed paika (või lisad lausa käsitsi lingid) ning edasi jääb tuunida ainult CSS? |
Vajalik kood sai lisatud, et veebileht kuvaks antud menüüd.
Tuunida ise ei oska, sellepärast lootsingi tasuta lahendusi internetist allalaadida ja oma veebilehele lisada.
E: Kui väga tahta, siis eks ikka oskab küll 
Nüüd tekkis ainult selline küsimus, et kas on võimalik menüü jäädavalt kinnitada?
Nii, et alla kerides oleks endiselt menüü kõige üleval.
Nagu sellel lehel: http://demilovato.com/
E2: Sain selliste seadetega asja aetud:
| .main-navigation ul {margin-left: auto; margin-right: auto; text-align:center; position: fixed; width: 100%; z-index:100;} |
|
|
| Kommentaarid: 353 loe/lisa |
Kasutajad arvavad: |
|
:: |
0 :: |
1 :: |
300 |
|
| tagasi üles |
|
|
|
| lisa lemmikuks |
|
 |
sa ei või postitada uusi teemasid siia foorumisse
sa ei või vastata selle foorumi teemadele
sa ei või muuta oma postitusi selles foorumis
sa ei või kustutada oma postitusi selles foorumis
sa ei või vastata küsitlustele selles foorumis
sa ei saa lisada manuseid selles foorumis
sa võid manuseid alla laadida selles foorumis
|
|
Hinnavaatlus ei vastuta foorumis tehtud postituste eest.
|
:: KKK
:: otsing 
:: statistika
:: kasutajate nimekiri
:: kasutajate grupid
:: registreeri
teata moderaatorile
