VVixnorMedlem sedan okt. 200946 inlägg Jag har installerat http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm till min sida och undrar om det går att fixa så den fungerar utan java script.
Jag använder den som ligger till vänster, Item 1, Folder 0, osv. Grejen som dyker upp när man håller musen över Folder 0 funkar inte när java script inte är aktiverat och jag har fått andra drop down meny att fungera utan java scrip, men då utan "animation".
Självklart går det :) Jag gör alltid DD-menyer enbart i CSS.
Grundprincipen är ganska enkel.
Tänk dig att du har ett DOM-träd som följer
UL //"Hållare" för hela menyn
LI //Objekt 1 i menyn
UL //Undermeny
LI //Objekt 1 i undermenyn
LI //Objekt 2 i undermenyn
LI //Objekt 2 i menyn
UL //Undermeny
LI //Objekt 1 i undermenyn
Då säger du bara att UL UL ska ha display:none, men när du hovrar över LI så ska UL få visas. Sån är grundprincipen.
Ett utdrag ur en dropdown-meny jag skapat, den är inte så "trimmad" men den funkar iallafall :)
div.menu ul{ list-style-type: none; display: block;}
div.menu ul>li ul{ visibility: hidden; position: absolute; z-index: 100; width: 170px; padding-left: 0;}
div.menu>ul ul ul{ margin-left: 170px; margin-top:-25px; }
div.menu li:hover > ul.children{ visibility: visible; }
div.menu>ul>li{ float: left; }
div.menu li{ height: 25px; display: list-item; }
div.menu ul a{display: block; height: 14px; line-height: 14px; }
Min meny är gjord utan javascript. Så här ser den ut live Inte riktigt lik den som du hänvisar till då den expanderar neråt och inte åt sidan. Den duger kanske ändå?
<div class="menybox">
<div class="vittext">MENY</div>
<div class="menytext">för alla</div>
<div class="loggcontainer">
<ul class="loggmeny">
<li> <a href="dold.php">Stäng Meny</a></li>
</ul>
</div>
<div id="vmeny">
<ul>
<li><a href="husfakta.php">Fakta om huset</a></li>
<li><a href="huset.php">Om föreningen »</a>
<ul>
<li class="undermeny"><a href="kanon.php"> föreningslokal</a></li>
<li class="undermeny"><a href="gard.php"> gårdsförvandling</a></li>
<li class="undermeny"><a href="bygget.php"> byggprocess gård</a></li>
<li class="undermeny"><a href="blommor.php"> gårdsskötsel</a></li>
<li class="undermeny"><a href="tvatt.php"> tvättstuga</a></li>
<li class="undermeny"><a href="trappa.php"> ny gårdsentré</a></li>
<li class="undermeny"><a href="trappa2.php"> nygammal trappa</a></li>
<li class="undermeny"><a href="arsbok.php"> 75-årsbok</a></li>
</ul>
</li>
<li><a href="stadgar.php">Stadgar</a></li>
<li><a href="felanm.php">Felanmälan</a></li>
<li><a href="dokument.php">Dokument</a></li>
<li><a href="lankar.php">Externa länkar</a></li>
<li><a href="hemsidan.php">Om hemsidan</a></li>
<li><a href="maklare.php">För mäklare</a></li>
<li><a href="forsta.php">Startsidan</a></li>
</ul>
</div>
<div class="menytext"> </div>
<div class="menytext">för medlemmar</div>
<div class="loggcontainer" >
<ul class="loggmeny" >
<li><a href="inloggning.php">Logga in</a></li>
</ul>
</div>
</div>
CSS
/* VERTIKAL RULLMENY, EXPANDERAR 1 NIVÅ*/
/* box för rullmenyn */
.menybox {padding: 10px; height: 90%; width: 150px;border:
1px solid #C8D6B2; overflow: auto; background: /*#C8D6B2;*/ #569AAA; position:fixed;} /*ÄNDRAT FÄRGEN HÄR*/
/* loggmeny, vill bara ha ett annat utseende och text som inte markeras som länk bara */
.menytext{font-size: 90%; color: #800000;}
.undermeny{font-size: 90%;}
.vittext {color: #FFFFFF;}
.loggcontainer{left; width: 148px; font-size: 110%;
border-top: 1px solid #C8D6B2; border-left: 1px solid #C8D6B2;
border-right: 1px solid #C8D6B2;}
.loggmeny{margin: 0; padding: 0; list-style-type: none;}
.loggmeny a{display: block; margin: 0; text-decoration: none;
padding-bottom: 0.5em; padding-left: 5px ; color: #800000;
background: #E6E3DA; border-bottom: 1px solid /*#C8D6B2;*/ #568Bac;} /*ÄNDRAT FÄRGEN HÄR*/
.loggmeny a:hover{background: #DCDFE4;}
/* Resten */
#vmeny ul {list-style-type: none;
font-size: 14px;
margin: 0px;
padding: 0px;}
#vmeny > ul > li {
border-top: 1px solid /*#C8D6B2;*/ #568BAC; /*ÄNDRAT FÄRGEN HÄR*/
border-bottom: 2px solid /*#C8D6B2;*/ #568BAC;
} /*ÄNDRAT FÄRGEN HÄR*/
#vmeny li {
background-color: #E9EFFB;
position: relative; }
#vmeny > ul > li > ul {background: #E6E3DA;}
#vmeny li:hover {
background-color: #DCDFE4;}
#vmeny a { text-decoration: none;
display: block;
padding-left: 8px;
padding-right: 8px;
padding-top: 2px;
padding-bottom: 2px;}
#vmeny a:link { color: black;}
#vmeny a:visited { color: black;}
#vmeny a:hover { color: blue;}
#vmeny a:active { color: black;}
#vmeny ul li a#current {backgrond: #000000;}
#vmeny > ul ul {
width: 130px;
display: none;}
#vmeny li:hover > a + ul {
display: block;}
Danne VMedlem sedan aug. 20068 090 inläggVVixnorMedlem sedan okt. 200946 inlägg Ok, jag skulle vilja ha en som ser ut såhär och fungerar även när java script inte är aktiverat +är java script aktiverat vill jag att det ska bli en animation när man använder menyn.
Det heter javascript inte java script, kolla in allas exempel som dom telat med sig de flesta har liknande funktioner du är ute efter och animeringen kan du göra i efterhand du kan läsa steg för steg att bygga en meny + lägga in effekter med jquery: http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/
VVixnorMedlem sedan okt. 200946 inlägg javascript, ok (blir iofs understryket med röd färg om man stavar så)
voigtann1 skrev:
Det heter javascript inte java script, kolla in allas exempel som dom telat med sig de flesta har liknande funktioner du är ute efter och animeringen kan du göra i efterhand du kan läsa steg för steg att bygga en meny + lägga in effekter med jquery: http://net.tutsplus.com/tutorials/design-tutorials/how-to-build-and-enhance-a-3-level-navigation-menu/
Jaha, kan man lägga javascript på en drop down meny gjord endast med css? T.ex. den här
Jag letar efter en svart meny, med responsive webbdesign, horizontal.
Jag vill att de ska se ut ungefär såhär: http://themify.me/demo/themes/minshop/blog/blog-4-columns/
Och när man förminskar webbläsarfönstret till iPhone storlek vill jag att menyn ska se ungefär likadan ut som i exemplet, men att man endast ska se undermenyerna när man behöver det.
Varför måste det vara JavaScript? Börja med att göra en enbart i CSS och förstå hur det funkar. Sen kan du använda dig av CSS3 animationer för att få till eventuella effekter för att ta fram menyn
VVixnorMedlem sedan okt. 200946 inlägg
Gildebrand skrev:
Varför måste det vara JavaScript? Börja med att göra en enbart i CSS och förstå hur det funkar. Sen kan du använda dig av CSS3 animationer för att få till eventuella effekter för att ta fram menyn
Tänkte att det är enklare att kopiera en färdig, och sedan ändra CSS.
Kopiera inte. Skriv själv.
Ska det vara responsivt så behöver du inte heller JavaScript. Responsiv design kan väl sammanfattas med => Float, Min/Max-values, Mediaquerys. Inget behov av JavaScript
VVixnorMedlem sedan okt. 200946 inlägg Jag tror jag behåller en meny jag redan gjort.
Jag använder:
@media screen and (max-width: 500px) {
i min CSS-kod
men behöver en ny "knapp" till en iPhone-meny.
Den knappen ska ta fram en lämplig meny för iPhone (som jag inte har gjort än)
Eller kan man göra en app om man är nybörjare eller tar det lång tid att lära?
