Nyt tarvis apua kaikki css-konkarit!!!!
löysin tällasen sivun, jossa oli neuvot tällasen menun tekemiseen ja yritin tehä just niinku neuvotaan, mutta eihän toi onnistu...
http://www.cssplay.co.uk/menus/flyoutt.html
Osaisko kukaan auttaa että miten toi nyt sit käytännössä toteutetaan?ja jos haluu tehä kuvilla saman ni onnistuuko?
Kiitos jo etukäteen!
Apua Horizontal Drop down menuun!!!!!!!
3
631
Vastaukset
- juhakorkeapudas
Voisit myös määritellä mikä oli ongelmana, "mutta eihän toi onnistu..." ei tilanteesta paljoa kerro, tai käytät Menu Builderia ja unohdat, että mitään 'ongelmaa' edes oli: http://www.cssplay.co.uk/menus/menu_builder_flyout.html.
- CSS -rookie
Rakensin oman menun juuri samaan tyyliin kun ko. sivun lähdekoodissa oli rakennettu ja viittaukset CSS-fileihin on kunnnossa...mutta kun katsastelen sivua verkossa, myös SUBMENUT ovat kokoajan näkyvissä.Lähdekoodissa oli
iptääkö mulla olla joku menu.css tai jotain? sitten oli- miecss
Et niin tarkasti html n puolta sitten katsonutkaan koska et huomannut kuinka paljon CSS ää tuokin menu tarvitsee toimiakseen.
Eli: melkein Huijausta koko sivu ..
Linkkaa allaolevat sivullesi niin pelittää menukin.
Tuossa on alkajaisiksi css_play.css :
body {font-family:verdana, arial, helvetica, sans-serif; font-size:76%; color:#000; padding:0; border:0; margin:0; background:#fff url(../pro/cssplay/body_back.gif) repeat-x 0 10px; text-align:center;}
a {color:#000;}
a:visited {color:#111;}
a:active {color:#222;}
a:hover {text-decoration:none;}
#wrapper {width:1000px; background:#fff url(../graphic/background.gif) repeat-y; margin:10px auto; text-align:left;}
#header {width:1000px; height:120px; float:left; background:#fff url(../graphic/back.gif); position:relative;}
#logo {float:left;}
#logo h1 {font-family:"times new roman", serif; color:#000; font-size:4em; float:left; margin:-10px 0 0 0; padding:0;}
#logo h2 {font-family:"times new roman", serif; color:#666; font-size:4em; font-weight:normal; padding:0 0 0 10px; margin:-10px 10px 0 -5px; float:left;}
#logo h2 a {color:#666;}
#logo a, #logo a:visited {text-decoration:none;}
#logo h3 {padding:0; margin:20px 0 0 0; font-size:1em; font-weight:normal; color:#888; float:left;}
#toplink {font-family:arial, sans-serif; position:absolute; right:10px; bottom:0;}
#toplink ul {padding:0; margin:0; list-style-type:none;}
#toplink ul li {float:left; font-size:0.8em; color:#999; margin:0 0 0 7px; line-height:25px; font-family:arial, sans-serif;}
#toplink ul li a, #toplink ul li a:visited {font-size:1em; color:#000; text-decoration:none;}
#toplink ul li a.highlite, #toplink ul li a.highlite:visited {color:#c00;}
#toplink ul li a:hover {color:#263; border-bottom:1px solid #000;}
#toplink ul li a img {border:0;}
#midlink {position:absolute; top:55px; left:0; width:1000px; height:38px; text-align:center; background: url(../pro/cssplay/cssplay_0.gif);}
#main_menu {padding:0; margin:0 19px; list-style-type:none; width:962px; height:36px; background:url(../pro/cssplay/cssplay_0.gif) no-repeat top right;}
#main_menu li {float:left; display:inline; width:120px; background:url(../pro/cssplay/cssplay_1.gif);}
#main_menu li a, #main_menu li a:visited {display:block; width:120px; height:36px; color:#ddd; font-size:1.1em; text-decoration:none; line-height:32px; font-family:arial, verdana, sans-serif; background:url(../pro/cssplay/cssplay_0.gif);}
#main_menu li a:hover {color:#fff; background:url(../pro/cssplay/cssplay_1.gif);}
#main_menu li a.chosen, #main_menu li a.chosen:visited, #main_menu li a:active, #main_menu li a:focus {color:#fff; background:url(../pro/cssplay/cssplay_2.gif);}
#main_menu li.java a:hover {color:#fff; background:url(../pro/cssplay/cssplay_1b.gif);}
#botlink {font-family:arial, sans-serif; position:absolute; bottom:0; left:10px;}
#botlink ul {padding:0; margin:0; list-style-type:none;}
#botlink ul li {float:left; font-size:0.8em; color:#999; margin:0 7px 0 0; line-height:25px;}
#botlink ul li a, #botlink ul li a:visited {font-size:1em; color:#000; text-decoration:none;}
#botlink ul li a:hover {color:#263; border-bottom:1px solid #000;}
#showcase {clear:both; width:1000px; background:#bc8f8f; height:auto; border:1px solid #aaa; border-width:1px 0;}
#info {background:#fff; width:750px; float:left;}
#info_right {display:block; float:right; width:230px; padding:10px; color:#fff;}
#info_right p {margin:0 0 10px 0;}
#info_right form fieldset {padding:0; border:0; margin:0 0 0 5px;}
#info_right ol {margin-top:40px;}
#info_right ol li {margin-bottom:5px;}
#info_right li a, #info_right li a:visited {color:#fff; font-size:11px; text-decoration:none;}
#info_right li a:hover {text-decoration:underline;}
#info h2 {font-family:"times new roman", serif; font-size:1.4em; margin:0; text-align:left; margin:15px 0 10px 0;}
#info h3 {font-family:"trebuchet ms", sans-serif; font-size:1.1em; font-weight:normal; margin:0 0 0 0; color:#006699; text-align:left; margin-bottom:10px;}
#info_right h3 {font-family:"trebuchet ms", sans-serif; font-size:1.1em; font-weight:normal; margin:0; color:#fff;}
#info_right_home {float:left; width:250px; overflow:hidden;}
#info_right_home a img {border:0; display:block;}
#content {width:750px; background:transparent; float:left;}
a.adbanner, a:visited.adbanner {text-align:center;color:#fff; font-size:11px; text-decoration:none;}
a.adbanner:hover {text-decoration:underline;}
p.cite {color:#008080; display:list-item; padding:0 5px; list-style-image: url(../graphic/open_quotes.gif); background: url(../graphic/close_quotes.gif) bottom right no-repeat;}
#left_column {width:468px; background:transparent; float:left; padding:0 32px 0 0;}
* html #left_column {width:500px; w\idth:468px;}
#left_column ol li {font-size:11px; line-height:16px; font-family:verdana, sans-serif; margin:5px 0;}
#left_column dl.sitemap dd a {text-decoration:none; color:#069;}
#left_column dl.sitemap dd a:hover {color:#fff; background:#069;}
#left_column dl.sitemap {margin-left:50px;}
#left_column dl.sitemap dd {margin:0;}
#right_column {width:230px; background:transparent; float:left; padding:0 5px 0 10px;}
* html #right_column {width:245px; w\idth:230px;}
dl.latest {font-size:10px; margin:10px 0 0 0;}
dl.latest dt {background:#bc8f8f; padding:5px; font-family:"times new roman", serif; font-weight:bold; font-size:14px; color:#fff; border-left:1px solid #fff;}
dl.latest dd {margin:0; padding:5px 5px 0 5px;}
dl.latest dd a, dl.latest dd a:visited {text-decoration:none; color:#000;}
dl.latest dd a em {font-style:normal; float:right; color:#468;}
dl.latest dd a b {color:#008080;}
dl.latest dd a:hover {text-decoration:underline;}
dl.latest dd a:hover em {cursor:pointer; text-decoration:none;}
dl.list {width:240px; margin:0 10px 10px 0; float:left;}
* html dl.list {float:none;}
dl.list dd {color:#666; background:#fff; font-size:11px; font-family:arial, sans-serif;}
dl.list dd a, dl.list dd a:visited {color:#000; font-weight:bold; font-size:12px; text-decoration:underline;}
dl.list dd a:hover {text-decoration:none;}
dl.list_last {margin-right:0;}
.advertisement {list-style-type:none; margin:10px 0 20px 0; padding:0;}
.advertisement li a, .advertisement li a:visited {color:#000; font-size:11px; text-decoration:none;}
.advertisement li a:hover {text-decoration:underline;}
.advertisement li span.text {font-size:11px; color:#008080;}
.cssplay {list-style-type:none; margin:10px 0 20px 0; padding:0;}
.cssplay li a, .cssplay li a:visited {color:#000; font-size:11px; text-decoration:none;}
.cssplay li a:hover {text-decoration:underline;}
.cssplay li span.text {font-size:11px; color:#008080;}
.spacer {margin-top:5px;}
#search {position:absolute; top:-20px; right:0; margin:0;}
#search form {margin:0; padding:0;}
#search form img {border:0; float:left; margin-right:10px;}
#search form label {font-size:0.9em;}
#far_right {width:230px; background:transparent; float:left; padding:0 10px 0 10px;}
* html #far_right {width:250px; w\idth:230px;}
#far_right img {display:block; border:0; margin-top:10px;}
#foot {clear:both; width:1000px; height:25px; background:#bc8f8f; color:#fff; font-size:10px;}
#foot p {font-size:11px; color:#fff; margin:5px 10px 5px 15px; float:left;}
#foot ul {list-style-type:none; margin:0; padding:0; float:right; margin-right:15px;}
#foot ul li {float:left; margin:5px 0 5px 10px;}
#content p {font-size:11px; line-height:16px; margin:5px 0 8px 0;}
#content h3, #far_right h3 {margin:15px 0 5px 0; font-size:18px; color:#000; font-family:"times new roman", serif;}
#content img {border:0;}
.adbanner {display:block; width:468px; height:60px; background:url(../graphic/banner_base.jpg);}
.left {float:left;}
.float_left {float:left; margin:0 10px 5px 0;}
img.slogan {display:block; background:url(../graphic/pc2.jpg);}
img.faq {display:block; background:url(../graphic/pc3.jpg);}
img.contact {display:block; background:url(../graphic/contact.jpg);}
img.privacy {display:block; background:url(../graphic/privacy.jpg);}
img.access {display:block; background:url(../graphic/access.jpg);}
img.support {display:block; background:url(../graphic/support.jpg);}
img.map {display:block; background:url(../graphic/map.jpg);}
img.advertise {display:block; background:url(../graphic/advertise2.jpg);}
img.oops {display:block; background:url(../graphic/oops.jpg);}
.clear {clear:both;}
.css {font-family:"times new roman", serif; font-weight:bold; padding-right:2px;}
.play {font-family:"trebuchet ms", sans-serif;}
.hiddenfromview {display:none;}
.date {font-weight:bold; color:#008080;}
.bold {font-weight:bold;}
.image img {border:0; margin-left:5px;}
pre {font-size:11px; color:#006699;}
p.highlight {color:#cc0000; font-weight:bold;}
#smalladsie {margin:25px 0; width:468px; padding:1px; background:#fff;}
#adsie {position:relative; clear:both; float:left; height:90px; border-top:25px solid #fff; border-bottom:10px solid #fff; z-index:0; text-align:left; padding:1px; background:#fff;}
#ad200 {margin:10px 0 10px 0;}
#supporters {padding:0; margin:0; list-style-type:none;}
#supporters li {width:154px; height:25px; line-height:24px; margin:1px 1px 0 0; color:#c00; float:left; text-align:left; font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; text-indent:15px; background:#ddd; font-size:11px;}
#supporters li a, #supporters li a:visited {display:block; width:100%; height:100%; text-decoration:none; color:#000;}
#supporters li a:hover {background:#bc8f8f; color:#fff;}
#supporters li a b, #supporters li a:visited b, #supporters li b {font-family:arial, tahoma, sans-serif; letter-spacing:-1px; font-weight:normal;}
p {font-size:11px; line-height:16px; margin:5px 0 15px 0;}
.g_right {float:left; margin:0 10px 5px 0; border:1px solid #fff; height:250px;}
.g_right:hover {border-color:#6f6;}
.g_sub {width:400px;}
.g_index {float:left; width:240px; margin:5px 5px 10px 0; border:1px solid #cca;}
.g_inline {float:left; width:230px;}
.gad {border:1px solid #cca;}
.ad_link {margin:15px 0 15px 0;}
.sidead {font-size:0.9em; font-family:arial, sans-serif; letter-spacing:1px;}
#bidvertiser {clear:both; padding:50px 0 20px 10px;}
.right_col {float:right; display:inline; width:250px;}
.left_col {float:left; display:inline; width:250px;}
.mid_col {float:left; display:inline; width:250px;}
Ja seuraavakin eli flyout.css tarvitaan:
.menu {font-family: arial, sans-serif; width:106px; height:150px; position:relative; margin:0; font-size:11px; margin:50px 0;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000; width:104px; height:20px; text-align:center; border:1px solid #fff; border-width:1px 1px 0 0; background:#c9c9a7; line-height:19px; font-size:11px;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#b3ab79;}
.menu ul li:hover ul {display:block; position:absolute; top:0; left:105px; width:105px;}
.menu ul li:hover ul li a.hide {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover a.hide {width:150px;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#b3ab79; color:#000; width:150px;}
.menu ul li:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:151px; top:0; color:#000;}
.menu ul li:hover ul li:hover ul li a {display:block; width:200px; background:#dfc184; color:#000;}
.menu ul li:hover ul li:hover ul li a:hover {background:#bd8d5e; color:#fff;}
ONNEA
Ketjusta on poistettu 0 sääntöjenvastaista viestiä.
Luetuimmat keskustelut
Suomalaisia naisia lennätetään seksimatkoille
https://www.iltalehti.fi/kotimaa/a/1f5f5e20-8c36-4907-9640-8e0c3b017c5a Gambia on jo vuosia ollut yhtä kuin munanhaku ma2502045Paras olisi vain unohtaa
Tuleekohan tähän meidän tilanteeseen ikinä mitään selvyyttä. Epätoivo iskee taas, enkä jaksaisi enää odottaa. Kohta lop822006- 961683
Mietitikö nainen koskaan
Miksi me ollaan päädytty tähän pisteeseen. Lähestmistapaa ei ole. Tarvitaanko me oikeasti enää tätä.1121511Nämä kaikki alla olevat aloitukset on saman naisen aloituksia
Kuinka paljon täytyy vintissä viheltää että esiintyy välillä jopa miehenä, ja sitten itse vastailee omiin kysymyksiinsä?1691171huono omatunto
johtuu siitä, että minulla on tunteita sinua kohtaan. Se vaikuttaa asiaan. Kaipasin sinua tänäänkin.651150- 113998
Onnistuit sohaisemaan mua
Kaikkein herkimpään kohtaan ja kyseenalaistamaan mun luottamuksellisuuden. Kun sitä ei ole niin ei ole mitään muutakaan63988Päätin juuri että
En odota että meidän välillä enää tapahtuisi mitään. Tämä on aivan liian monimutkaista ja kyllä sinäkin olisit joskus mi32972- 61896