2
Webbprogrammering språk, html5/CSS,Javascript/PHP/ ASP.net
Postat av r5_abyss den 29 September 2015, 13:27
4 kommentarer · 754 träffar
Hejsan alla på Fragbite, jag läser SystemUtveckling årskurs 2 och håller just nu på med en kurs som heter webbprogrammering. Vi ska göra 2st likadana hemsidor en som fungerar med PHP och en som fungerar i asp.net.. Kriterierna för att sidan ska vara godkänd är att man ha en registrerings funktion som ska kopplas till en databas tabell via php och asp.net. Samt att den ska ha en ögonvänlig design. Det ska finnas 1 Javascripts funktion på hemsidan också. I min javascripts funktion har jag bestämt mig för att göra en rull lista för menyn. Men jag får den inte riktigt att fungera. I min javascripts fil så ser det ut såhär: $(document).ready(function() {
$('.Meny > li').bind('mouseover', openSubMenu);
$('.Meny > li').bind('mouseout', closeSubMenu);
function openSubMenu() {
$(this).find('ul').css('visibility', 'visible');
};
function closeSubMenu() {
$(this).find('ul').css('visibility', 'hidden');
};
});
och i min php fil har jag skrivit såhär. i <head> taggen finns det <ul class="Meny">
<script type="text/javascript" src="javascript.js">
</script>
</head>
i ser det ut såhär <nav>
<li><a href="minhemsida.php">Meny</a>
<ul>
<li><a href="minhemsida.php">Startsida</a></li>
<li><a href="Power%20Rangers.php">Power Rangers</a></li>
<li><a href="registrering.php">Registrering</a></li>
</ul>
</li>
</ul>
</nav>
min css ser ut såhär:
/*style the main menu*/
.Meny {
margin:0;
margin-left: auto;
margin-right: auto;
}
.Meny li {
list-style:none;
float:none;
font:12px Arial, Helvetica, sans-serif;
color: whitesmoke;
}
.Meny li a:link, .Meny li a:visited {
display:block;
text-decoration:none;
background-color:#454A65;
padding: 0.5em 2em;
margin:0;
border-right: 1px solid #fff;
color:whitesmoke;
}
.Meny li a:hover {
background-color:#0CF;
}
/*style the sub menu*/
.Meny li ul {
position:absolute;
visibility:hidden;
border-top:1px solid #fff;
margin:0;
padding:0;
}
.Meny li ul li {
display:inline;
float:none;
}
.Meny li ul li a:link, .Meny li ul li a:visited {
background-color:#454A65;
width:auto;
}
.Meny li ul li a:hover {
background-color:#454A65;
}
såhär ser det ut just nu så problemet är att det inte kommer fram några undermenyer när jag trycker på knappen och att den inte lägger sig till vänster och inte i mitten som det andra. http://fuskbugg.se/dl/TxwZfL/rulllista.jpg
Någon kunnig får gärna säga varför menyn inte lägger sig i mitten också, antar det är något i css som ska ändras?
jag vill att det ska bli såhär som i meny 2
http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/finishedMenu.html
Denna tråden kommer jag uppdatera konstant för jag har massor av frågetecken, sidor jag använder mig uttav för hjälpemedel är w3schools.com och youtube filmer
$('.Meny > li').bind('mouseover', openSubMenu);
$('.Meny > li').bind('mouseout', closeSubMenu);
function openSubMenu() {
$(this).find('ul').css('visibility', 'visible');
};
function closeSubMenu() {
$(this).find('ul').css('visibility', 'hidden');
};
});
och i min php fil har jag skrivit såhär. i <head> taggen finns det <ul class="Meny">
<script type="text/javascript" src="javascript.js">
</script>
</head>
i ser det ut såhär <nav>
<li><a href="minhemsida.php">Meny</a>
<ul>
<li><a href="minhemsida.php">Startsida</a></li>
<li><a href="Power%20Rangers.php">Power Rangers</a></li>
<li><a href="registrering.php">Registrering</a></li>
</ul>
</li>
</ul>
</nav>
min css ser ut såhär:
/*style the main menu*/
.Meny {
margin:0;
margin-left: auto;
margin-right: auto;
}
.Meny li {
list-style:none;
float:none;
font:12px Arial, Helvetica, sans-serif;
color: whitesmoke;
}
.Meny li a:link, .Meny li a:visited {
display:block;
text-decoration:none;
background-color:#454A65;
padding: 0.5em 2em;
margin:0;
border-right: 1px solid #fff;
color:whitesmoke;
}
.Meny li a:hover {
background-color:#0CF;
}
/*style the sub menu*/
.Meny li ul {
position:absolute;
visibility:hidden;
border-top:1px solid #fff;
margin:0;
padding:0;
}
.Meny li ul li {
display:inline;
float:none;
}
.Meny li ul li a:link, .Meny li ul li a:visited {
background-color:#454A65;
width:auto;
}
.Meny li ul li a:hover {
background-color:#454A65;
}
såhär ser det ut just nu så problemet är att det inte kommer fram några undermenyer när jag trycker på knappen och att den inte lägger sig till vänster och inte i mitten som det andra. http://fuskbugg.se/dl/TxwZfL/rulllista.jpg
Någon kunnig får gärna säga varför menyn inte lägger sig i mitten också, antar det är något i css som ska ändras?
jag vill att det ska bli såhär som i meny 2
http://www.webchief.co.uk/blog/simple-jquery-dropdown-menu/finishedMenu.html
Denna tråden kommer jag uppdatera konstant för jag har massor av frågetecken, sidor jag använder mig uttav för hjälpemedel är w3schools.com och youtube filmer
