Menu maken in Jquery

Status
Niet open voor verdere reacties.
G

gast0198

Gebruiker
Lid geworden
15 nov 2016
Berichten
83
Ik had graag een menu gemaakt aan de hand van het voorbeeld (zie afbeelding), maar ik weet niet wat in css moet instellen?
De "menu" div moet via css opgeschoven worden naar links, zodat enkel de nummers nog zichtbaar is.
jquery:
HTML: 
<div id="menu">
		<ul>
  			<li><a href="#Menu 1">Menu 1</a></li>
  			<li><a href="#Menu 2">Menu 2</a></li>
  			<li><a href="#Menu 3">Menu 3</a></li>
			<li><a href="#Menu 4">Menu 4</a></li>
			<li><a href="#Menu 5">Menu 5</a></li>
			<li><a href="#Menu 6"> Menu 6</a></li>
		</ul>
	</div>
css;
Code: 
#menu {
width:150px;
left:180px;
position: absolute;
z-index:100;

}
#menu,ul  li{
marginbottom:1px;
position: relative;
float : left;

}
#menu, ul, li a{
width: 150px;
height: 22px;
backgroundcolor:#00293E;
textdecoration:none;
display: block;
padding: 7px 10px 0 0;
textalign:right;
fontweight:bold;
cursor: pointer;
cursor: hand;
}
foto.JPG
 
Laatst bewerkt door een moderator:
De code die je geeft is html met css, dus niet jquery met css.
Met de volgende css kun je dit maken
Code: 
/* schuif #menu voorbij linker rand */
#menu {
  position: absolute;
  top: 25px; left: -160px;
  z-index: 100;
}
/* zet op standaard waardes */
#menu ul, #menu ul li, #menu ul a {
  float: none;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
}
#menu ul {
  float: left;
  list-style: none;
}
/* alle opmaak van een knop */
#menu ul a,
#menu ul a:hover,
#menu ul a:focus,
#menu ul a:active {
  box-sizing: border-box;
  width: 180px;
  display: block;
  padding: 6px 7px 7px 7px;
  cursor: default;
  text-decoration: none;
  text-align: right;
  font: bold 13px sans-serif;
  white-space: nowrap;
  letter-spacing: 1px;
  outline: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  background-color: #00293e;
}
/* animatie in breedte */
@keyframes breedte {
  from {width: 180px;}
  to   {width: 330px;}
}
/* verander breedte bij muis actie */
#menu ul a:hover,
#menu ul a:active {
  width: 330px;
  background-color: #b3cd72;
  animation-name: breedte;
  animation-duration: .5s;
}
Suc6. Have fun.
 
Laatst bewerkt:
Bedankt, dat ziet er al veel beter uit, maar ik was het volgende vergeten te vermelden: (daarmee in de titel jquery)

Indien ik over een li onderdeel ga moet ik via jQuery de positie aanpassen, hoe doe ik dit? .animate() opdracht? toegepast op de "left" eigenschap.
 
Ik had graag een menu gemaakt aan de hand van het voorbeeld (zie afbeelding), maar ik weet niet wat in css moet instellen?
Klik om te vergroten...
Zoals je vroeg... de css voor het menu als in je afbeelding.

De "menu" div moet via css opgeschoven worden naar links, zodat enkel de nummers nog zichtbaar is.
Klik om te vergroten...
Zoals je vroeg... menu naar links en animatie toegevoegd (animatie vroeg je niet maar dit maakt het minder saai)

De css is voor deze html die je gaf:
Code: 
<div id="menu">
  <ul>
    <li><a href="#Menu1">Menu 1</a></li>
    <li><a href="#Menu2">Menu 2</a></li>
    <li><a href="#Menu3">Menu 3</a></li>
    <li><a href="#Menu4">Menu 4</a></li>
    <li><a href="#Menu5">Menu 5</a></li>
    <li><a href="#Menu6">Menu 6</a></li>
  </ul>
</div>
Ik begrijp je laatste vraag dus niet?
 
Laatst bewerkt:
Ik heb gemerkt dat er op de css met html (doorgestuurd op 1 december) iets ontbreekt, namelijk dat de cijfers niet meer terugkomen na het uitschuiven van een menu en het cijfer zou een andere kleur moeten krijgen na klikken. Zie voorbeeld foto zie je menu 2 uitgeschoven en de 1 werd rood.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan