Joomla!NL - Hoe maak ik roll-over afbeeldingen in het mainmenu?

Hoe maak ik roll-over afbeeldingen in het mainmenu?

11 nov 2014 17:27 - 11 nov 2014 20:16

#1

Hoi allemaal!

Ik ben een website aan het maken (hangt hier even achter www.yormartens.nl/tts/ ), bijna klaar en helemaal tevreden, alleen het bovenste menu...

1. Graag zou ik hier rollover images van maken op een desktop.

(heb uiteraard gezocht, moet kunnen met CSS, maar ik snap er vaak helemaal niks van... )

2. Daarnaast zou ik graag de images alleen op een desktop zien en zodra men hem op een tablet of smartphone bekijkt alleen de tekst wordt weergegeven...

Is dit mogelijk? En zo ja, kan iemand mij in Jip en Janneke taal uitleggen hoe ik dat kan doen?

Alvast bedankt voor alle hulp!!

Gr. Yor

Edit WoodyF4u: Ik heb de titel van je topic aangepast omdat de oude titel mij onduidelijk leek voor andere lezers.

Yorremans
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 7

Hoe maak ik roll-over afbeeldingen in het mainmenu?

11 nov 2014 20:24

#2

Yor,
Welkom op het forum van Joomla!NL namens het hele team.

Ik heb geen pasklaar Jip en Janneke-voorbeeld voor je.
Maar ik vond dit topic dat over hetzelfde gaat. Misschien kun je daar wat mee.

En misschien kun je het combineren met deze informatie over het tonen of verbergen van iets op een mobile of desktop.

Met vriendelijke groet,
Wouter Compactweb.nl

Voordat je een vraag post, gebruik eerst de zoekfunctie van ons forum.

Wil je Joomla!NL steunen? Dat kan met een donatie.

WoodyF4u
Moderator + Nieuwsteam
Berichten: 11310

Hoe maak ik roll-over afbeeldingen in het mainmenu?

11 nov 2014 20:47

#3

Hoi Wouter,

Bedankt voor je reply... puntje 2 is helemaal helder, puntje 1 moet ik even rustig doornemen...

Ik duik er morgen even in...

Thanx!

Yorremans
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 7

Hoe maak ik roll-over afbeeldingen in het mainmenu?

12 nov 2014 16:26

#4

Naar aanleiding van deze pagina: docs.joomla.org/Image_only_menu_items_with_rollover_effect

Het is mij wel duidelijk, ik snap het, maar ik ben geen programmeur...

Nu heb ik onderstaande code... maar in welk css bestand moet ik dit überhaupt zetten?

Met Firebug zie ik bootstrap.css en style.css

Code:

#li class="item125" a {
  width: 141px;
  height:90px;
  background: url(../images/knopservice.png) 0 0 no-repeat;
}
 
#li class="item125" a:hover {
  background: url(../images/knopservice-ro.png) 0 0 no-repeat;
}

Yorremans
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 7

Hoe maak ik roll-over afbeeldingen in het mainmenu?

12 nov 2014 16:35

#5

In style.css, maar dit gaat niet werken. Een li is geen div, dus je zult de naam van de parent div wel mee moeten nemen.

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37559

Hoe maak ik roll-over afbeeldingen in het mainmenu?

12 nov 2014 18:03 - 12 nov 2014 19:34

#6

Edit WoodyF4u: Ik heb het citaat verwijderd dat verwees naar de tekst in de vorige reactie, omdat het citaat niets toevoegt aan deze discussie.

Juist ja...

Thanx, weer een stapje verder, ik ga weer verder uitvogelen...

Yorremans
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 7

Hoe maak ik roll-over afbeeldingen in het mainmenu?

13 nov 2014 09:25

#7

Schiet mij maar in de feestverlichting...

Loop nu alweer 2 uur te hannesen...

Ik heb nu dit onderaan in de style.css gezet... er zal vast wel een { of # verkeerd staan want wat ik ook doe er veranderd helemaal niets...

Code:

{
	.col-md-12 desktopnav subMenu"
	.nav menu nav-pills"
	#li class="item125" a {
		width: 141px;
		height:90px;
		background: url(../images/knopservice.png) 0 0 no-repeat;
		
		#li class="item125" a:hover {
			background: url(../images/knopservice-ro.png) 0 0 no-repeat;
}

Misschien moet ik eens aan de cursus...

Yorremans
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 7

Hoe maak ik roll-over afbeeldingen in het mainmenu?

13 nov 2014 09:39

#8

Misschien moet ik eens aan de cursus...

Strak plan

Hier kan je zo ongeveer alles vinden over css.
Zoals al aangegeven heeft een li geen div id, dus dat werkt nooit met een hekje. Daarnaast wordt de class naam uit de gegenereerde html code gehaald, dus die zet je niet op deze manier in je definitie.
Je zult het denk ik ongeveer zo moeten doen:

Code:

.nav > li.item-125 > a {

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37559

Hoe maak ik roll-over afbeeldingen in het mainmenu?

16 nov 2014 15:20

#9

Ik heb onderstaande aan mijn css toegevoegd. Dat werkt super op een desktop!

Code:

.nav > li.item-125 > a {
    text-indent:-9999px;
    width: 141px;
    height: 90px;
    background: url(http://yormartens.nl/tts/images/knopservice.png) 0 0 no-repeat;
}
.nav > li.item-125 > a:hover {
    background: url(http://yormartens.nl/tts/images//knopservice-ro.png) 0 0 no-repeat;
}
.nav > li.item-126 > a {
    text-indent:-9999px;
    width: 141px;
    height: 90px;
    background: url(http://yormartens.nl/tts/images/knopverkoop.png) 0 0 no-repeat;
}
.nav > li.item-126 > a:hover {
    background: url(http://yormartens.nl/tts/images//knopverkoop-ro.png) 0 0 no-repeat;
}
.nav > li.item-132 > a {
    text-indent:-9999px;
    width: 141px;
    height: 90px;
    background: url(http://yormartens.nl/tts/images/knopverhuur.png) 0 0 no-repeat;
}
.nav > li.item-132 > a:hover {
    background: url(http://yormartens.nl/tts/images//knopverhuur-ro.png) 0 0 no-repeat;
}
.nav > li.item-139 > a {
    text-indent:-9999px;
    width: 52px;
    height: 90px;
    background: url(http://yormartens.nl/tts/images/knopfacebook.png) 0 0 no-repeat;
}
.nav > li.item-139 > a:hover {
    background: url(http://yormartens.nl/tts/images//knopfacebook-ro.png) 0 0 no-repeat;
}
.nav > li.item-140 > a {
    text-indent:-9999px;
    width: 52px;
    height: 90px;
    background: url(http://yormartens.nl/tts/images/knoptwitter.png) 0 0 no-repeat;
}
.nav > li.item-140 > a:hover {
    background: url(http://yormartens.nl/tts/images//knoptwitter-ro.png) 0 0 no-repeat;
    }
.nav > li.item-141 > a {
    text-indent:-9999px;
    width: 43px;
    height: 90px;
    background: url(http://yormartens.nl/tts/images/knoplinkedin.png) 0 0 no-repeat;
}
.nav > li.item-141 > a:hover {
    background: url(http://yormartens.nl/tts/images//knoplinkedin-ro.png) 0 0 no-repeat;
}
.nav > li.item-133 > a {
    text-indent:-9999px;
    width: 105px;
    height: 90px;
    background: url(http://yormartens.nl/tts/images/knopoverons.png) 0 0 no-repeat;
}
.nav > li.item-133 > a:hover {
    background: url(http://yormartens.nl/tts/images//knopoverons-ro.png) 0 0 no-repeat;
}
.nav > li.item-130 > a {
    text-indent:-9999px;
    margin-left:-2px;
    width: 89px;
    height: 90px;
    background: url(http://yormartens.nl/tts/images/knopcontact.png) 0 0 no-repeat;
}
.nav > li.item-130 > a:hover {
    background: url(http://yormartens.nl/tts/images//knopcontact-ro.png) 0 0 no-repeat;

Nu wil ik deze toevoeging uitschakelen op een tablet/smartphone. Ik vind de volgende code in mijn css bestand, maar waar en hoe zet ik nu uit wat ik heb toegevoegd...

Code:

@media (max-width: 1000px) {
.desktopnav { display:none !important;}
.site-title { position:relative !important;text-align:center !important; left:0 !important;}
a.mobile-menu {
    color: #fff !important;
    border-radius: 3px;
    width: 40px;
    height: 40px;
    position: fixed;
    right: 10px;
    top: 10px;
    z-index: 99999;
    text-align:center;
    line-height: 40px;
    font-size: 20px;
}
a.icon_menu {
    font-size:30px;    
    line-height:40px;
}

.caption {
    width:100%;
    left:0;
    top:15% !important;
    position:absolute;
}

.mobile-sidebar {
    width:130px;
    display:block;
    position:fixed;
    right:-132px;
    top:0;
    bottom:0;
    z-index:999999;
    background:#2d2a2f;
    padding:20px;
    overflow-y: auto;
}

.mobile-sidebar>.nav>li>a {
    padding: 10px 0px !important;
}

.mobile-sidebar>.nav>li {
    width:100%;
}

.mobile-sidebar>.nav {
    display:block !important;
}

.mobile-sidebar>.nav>li{
    line-height:1.6em !important;
    border:none !important;
}

a.icon_close {
font-size: 28px;
margin: 20px 0px;
display: block;
color: #fff !important;
}

.mobile-sidebar .nav {
    background:none !important;
}

#owl-team .owl-buttons {
        display:none;
    }
    
    .bigheader {
        font-size:28px !important;
    }
    span.fancy:before, span.fancy:after {
        display:none !important;
    }
    .quote-message {
        font-size:16px;
    }

}

@media (min-width: 1000px) {
    .smallnav { display:none !important;}
    .mobile-sidebar, a.mobile-menu { display:none !important;}
    
}

Gr. Yor

Yorremans
Heeft onderwerp gestart
Nieuw op Joomla!NL
Berichten: 7

Hoe maak ik roll-over afbeeldingen in het mainmenu?

16 nov 2014 15:33

#10

Globaal kan je hier alles overrulen:

Code:

.mobile-sidebar>.nav>li>a { 
 }

Bijvoorbeeld:

Code:

background: none;
height: auto;

Etc...

Groetjes, Astrid

Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725

Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.

Astrid
Moderator + Technisch team
Berichten: 37559

Laatste nieuws

Welkom bij Joomla!NL

Hoe maak ik roll-over afbeeldingen in het mainmenu?

Hoe maak ik roll-over afbeeldingen in het mainmenu?

Hoe maak ik roll-over afbeeldingen in het mainmenu?

Hoe maak ik roll-over afbeeldingen in het mainmenu?

Hoe maak ik roll-over afbeeldingen in het mainmenu?

Hoe maak ik roll-over afbeeldingen in het mainmenu?

Hoe maak ik roll-over afbeeldingen in het mainmenu?

Hoe maak ik roll-over afbeeldingen in het mainmenu?

Hoe maak ik roll-over afbeeldingen in het mainmenu?

Hoe maak ik roll-over afbeeldingen in het mainmenu?

Hoe maak ik roll-over afbeeldingen in het mainmenu?

Laatste forumberichten

Wil je Joomla!NL steunen?