[Typo3-UG Dutch] menu met <ul>
Ric van Westhreenen (AlterNET)
ric at alternet.nl
Fri Apr 22 23:47:53 CEST 2005
De bolletjes kun je via CSS vervangen door andere elementen, bijvoorbeeld
een cirkel of een vierkantje, of zelfs een plaatje.
Zie hieronder de CSS voorbeelden:
open rondje .bullet {list-style-type: disc;}
vierkantje.bullet {list-style-type: square;}
cirkel .bullet {list-style-type: circle;}
nummers .bullet {list-style-type: decimal;}
romeinse cijfers klein .bullet {list-style-type: lower-roman ;}
romeinse cijfers groot .bullet {list-style-type: upper-roman;}
letters klein .bullet {list-style-type: lower-alpha;}
letters groot .bullet {list-style-type: upper-alpha;}
plaatje als bullet .bullet {list-style-image: url(/images/icons/arrow.gif);}
Gr. Ric
> Ik gebruik nou onderstaand menu, hierin zit ook een gedeelte javascript
> gekoppeld maar dat moet naar mijn mening geen probleem zijn.Als typoscript
> heb ik de code helemaal onder aan de pagina op de 1 of andere manier ben
> ik
> nou al mijn effecten van het menu kwijt? Ik zie gewoon een bolletjes menu?
> Weet iemand hier raad mee?
>
>
> <div class="menu">
> <!--###menu### begin -->
> <script type="text/javascript" src="inc/m_dom.js"></script>
> <ul id="udm" class="udm">
> <li class="level1"><a href="http://www.test.com/" title="UDM Home
> page">Home</a> </li>
> <li class="level2"><a href="http://www.test.com/menu/support/"
> title="Help and support">Algemeen</a>
> <ul style="width:9.8em">
> <li><a href="http://www.test.com/manual/"
> title="Online developer's manual">Online manual</a>
> <ul style="width:9em">
> <li><a
> href="http://www.test.com/manual/quickstart/">Quick start</a></li>
> <li><a
> href="http://www.test.com/manual/#contents">Contents:</a></li>
> <li><a
> href="http://www.test.com/manual/setup/">1. Setting it up</a></li>
> <li><a
> href="http://www.test.com/manual/customising/">2. Customising</a></li>
> <li><a
> href="http://www.test.com/manual/depth/">4. In-depth</a></li>
> </ul>
> </li>
> <li class="level3"><a
> href="http://www.test.com/manual/downloads/" title="Download the
> developer's
> manual">Manual downloads</a></li>
> <li><a
> href="http://www.test.com/manual/faq/">Technical FAQ</a></li>
> <li><a
> href="http://www.brothercake.com/forum/">UDM
> Support Forum</a></li>
> <li><a
> href="http://www.test.com/contact/index//type=support&subject=Support_reques
> t">Email support</a></li>
> </ul>
> <li><a href="http://www.test.com/" title="UDM Home
> page">Werkwijze</a>
> <li><a href="http://www.test.com/" title="UDM Home
> page">Projecten</a>
> <li><a href="http://www.test.com/" title="UDM Home
> page">Contact</a>
>
>
>
> </li>
>
> </ul>
>
>
> <!--###menu### end -->
> </div>
>
>
> #TYPOScRIPT!!!!!!!!!!!!!!!!!!!!!
>
>
> #############
> # MENU LINKS #
> #############
>
> temp.leftnav = HMENU
> temp.leftnav.entryLevel = 0
> temp.leftnav.stdWrap.wrap = <div id="menu"> | </div>
> temp.leftnav {
> 1 = TMENU
> 1 {
> noblur = 1
> wrap = <ul id="udm"> | </ul>
> NO {
> wrapItemAndSub = <li>|</li>
> }
> 1.ACT < 1.NO
> ACT = 1
> ACT {
> expAll=1
> wrapItemAndSub = <li id="level1">|</li>
> ATagParams = class="current"
> }
> }
> 2 = TMENU
> 2 {
> noblur = 1
>
> wrap = <ul id="level2"> | </ul>
> NO {
> wrapItemAndSub = <li>| </li>
> }
>
> 2.ACT < 2.NO
> ACT = 1
> ACT {
> wrapItemAndSub = <li id="level2">|</li> ATagParams = class="current"
> expAll=1
> }
> }
> 3 = TMENU
> 3 {
> noblur = 1
>
> wrap = <ul id="level3"> | </ul>
> NO {
> wrapItemAndSub = <li>| </li>
> }
>
> 3.ACT < 3.NO
> ACT = 1
> ACT {
> expAll=1
> wrapItemAndSub = <li id="level3">|</li> ATagParams = class="current"
> }
> }
> 4 = TMENU
> 4 {
> noblur = 1
> wrap = <ul id="subsubsubnavlist"> | </ul> NO { wrapItemAndSub = <li>|
> </li>
> }
>
> 4.ACT < 4.NO
> ACT = 1
> ACT {
> expAll=1
> wrapItemAndSub = <li id="subsubsubactive">|</li> ATagParams =
> class="current"
> }
> }
> }0˜
> 0 §
> 0
>
> -----Oorspronkelijk bericht-----
> Van: typo3-ug-dutch-bounces at lists.netfielders.de
> [mailto:typo3-ug-dutch-bounces at lists.netfielders.de] Namens Wim
> Cruysberghs
> - thuis
> Verzonden: zaterdag 23 april 2005 2:47
> Aan: 'TYPO3 Usergroup Dutch'
> Onderwerp: RE: [Typo3-UG Dutch] menu met <ul>
>
> Kijk, dit werkt bij mij voor een navigatiemenu links:
>
> (Gebaseerd op Rob's voorbeeldje, waarvoor Bedankt!!!!)
>
> ** Typoscript-setup: **
>
> #############
> # MENU LINKS #
> #############
>
> temp.leftnav = HMENU
> temp.leftnav.entryLevel = 0
> temp.leftnav.stdWrap.wrap = <div id="navcontainer"> | </div> temp.leftnav
> {
> 1 = TMENU
> 1 {
> noblur = 1
> wrap = <ul id="navlist"> | </ul>
> NO {
> wrapItemAndSub = <li>|</li>
> }
> 1.ACT < 1.NO
> ACT = 1
> ACT {
> expAll=1
> wrapItemAndSub = <li id="active">|</li>
> ATagParams = class="current"
> }
> }
> 2 = TMENU
> 2 {
> noblur = 1
>
> wrap = <ul id="subnavlist"> | </ul>
> NO {
> wrapItemAndSub = <li>| </li>
> }
>
> 2.ACT < 2.NO
> ACT = 1
> ACT {
> wrapItemAndSub = <li id="subactive">|</li> ATagParams = class="current"
> expAll=1
> }
> }
> 3 = TMENU
> 3 {
> noblur = 1
>
> wrap = <ul id="subsubnavlist"> | </ul>
> NO {
> wrapItemAndSub = <li>| </li>
> }
>
> 3.ACT < 3.NO
> ACT = 1
> ACT {
> expAll=1
> wrapItemAndSub = <li id="subsubactive">|</li> ATagParams = class="current"
> }
> }
> 4 = TMENU
> 4 {
> noblur = 1
> wrap = <ul id="subsubsubnavlist"> | </ul> NO { wrapItemAndSub = <li>|
> </li>
> }
>
> 4.ACT < 4.NO
> ACT = 1
> ACT {
> expAll=1
> wrapItemAndSub = <li id="subsubsubactive">|</li> ATagParams =
> class="current"
> }
> }
> }
>
>
> #############
> # BEGIN PAGE #
> #############
>
>
> # Setting up 'page' to be the default PAGE object (type=0)
> lib.stdheader.10.stdWrap.wrap = tt_content.stdWrap.dataWrap = <A
> name="{field:uid}"></a>
>
>
> page = PAGE
> page.typeNum = 0
> page.stylesheet = fileadmin/templates/nouvo/styledsbtestmenu.css
> page.1 = TEMPLATE
> page.1.marks.PAGE_UID = TEXT
> page.1.marks.PAGE_UID.field = uid
> page.1 {
> template = FILE
> template.file = fileadmin/templates/nouvo/templateNL.html
> template.file.lang.nl = fileadmin/templates/nouvo/templateNL.html
> template.file.lang.fr = fileadmin/templates/nouvo/templateFR.html
> workOnSubpart = DOCUMENT_BODY
> subparts.CONTENT_LEFT < styles.content.getLeft
> subparts.CONTENT_RIGHT < styles.content.getRight
> subparts.CONTENT_BORDER < styles.content.getBorder
> subparts.CONTENT < styles.content.get
> subparts.LEFTNAV < temp.leftnav
> subparts.ROOTMENU < temp.pathMenu
> subparts.LANGSEL = PHP_SCRIPT
> subparts.LANGSEL.file = media/scripts/example_languageMenu.php
>
>
>
> }
>
>
>
> ** CSS **
>
> #navcontainer { margin-left: 0; width:170 px; }
>
> #navcontainer ul
> {
> margin: 0;
> padding: 0;
> list-style-type: none;
> font-family: verdana, arial, Helvetica, sans-serif;
> }
>
>
> /* Level 1 */
>
> #navcontainer li { margin: 0; }
>
> #navcontainer a
> {
> display: block;
> padding: 5px 10px;
> width: 100%;
> color: #fff;
> background-color: #1F3D73;
> text-decoration: none;
> border-top: 1px solid #fff;
> border-left: 1px solid #fff;
> border-bottom: 1px solid #333;
> border-right: 1px solid #333;
> font-weight: bold;
> font-size: .8em;
> background-image: url(images/vertical06.jpg);
> background-repeat: no-repeat;
> background-position: 0 0;
> }
>
> #navcontainer a:hover
> {
> color: #fff;
> background-color: #425E8F;
> text-decoration: none;
> border-top: 1px solid #333;
> border-left: 1px solid #333;
> border-bottom: 1px solid #fff;
> border-right: 1px solid #fff;
> background-repeat: no-repeat;
> width: 100%;
> }
>
> /* Level 2 */
>
> #navcontainer ul ul li { margin: 0; }
>
> #navcontainer ul ul a
> {
> display: block;
> padding: 5px 5px 5px 20px;
> width: 100%;
> color: #fff;
> background-color: #828282;
> text-decoration: none;
> font-weight: bold;
> }
>
> #navcontainer ul ul a:hover
> {
> color: #fff;
> background-color: #A3A3A3;
> text-decoration: none;
> font-weight: bold;
> width: 100%;
> }
>
> /* Level 3 */
>
> #navcontainer ul ul ul li { margin: 0;}
>
> #navcontainer ul ul ul a
> {
>
> list-style: none;
> padding: 5px 5px 5px 30px;
> margin: 0;
>
> width: 100%;
> color: #000;
> background-color: #B5B5B5;
> text-decoration: none;
> font-weight: bold;
> border-top: 1px solid gray;
> border-left: 0;
> border-bottom: 0;
> border-right: 0;
> }
>
> #navcontainer ul ul ul a:hover
> {
> color: #000;
> background-color: #C6C6C6;
> text-decoration: none;
> font-weight:bold;
> border-top: 1px solid gray;
> border-left: 0;
> border-bottom: 0;
> border-right: 0;
> width: 100%;
> }
>
>
> /* Level 4 */
>
> #navcontainer ul ul ul ul li { margin: 0; }
>
> #navcontainer ul ul ul ul a
> {
> display: block;
> padding: 5px 5px 5px 40px;
> width: 100%;
> color: #666;
> background-color: #E0E0E0;
> text-decoration: none;
> font-weight: bold;
> border-top: 1px dotted gray;
> }
>
> #navcontainer ul ul ul ul a:hover
> {
> color: #666;
> background-color: #ffffff;
> text-decoration: none;
> font-weight: bold;
> border-top: 1px dotted gray;
> width: 100%;
> }
>
>
>
>
>
> -----Original Message-----
> From: typo3-ug-dutch-bounces at lists.netfielders.de
> [mailto:typo3-ug-dutch-bounces at lists.netfielders.de]On Behalf Of Daniel
> Doesburg
> Sent: vendredi 22 avril 2005 4:53
> To: typo3-ug-dutch at lists.netfielders.de
> Subject: Re: [Typo3-UG Dutch] menu met <ul>
>
>
> Oeps, ja daar had ik nog niet bij stil gestaan.
>
> Bedankt voor je antwoord.
>
> Daniel
>
>
>
>
> Rob De Vries schreef:
>>
>> dan hebben al je <li> de class subACt. Zo kan je niet echt bepalen of
>> iets actief is of niet.
> _______________________________________________
> Typo3-ug-dutch mailing list
> Typo3-ug-dutch at lists.netfielders.de
> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-ug-dutch
>
> _______________________________________________
> Typo3-ug-dutch mailing list
> Typo3-ug-dutch at lists.netfielders.de
> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-ug-dutch
>
>
>
> _______________________________________________
> Typo3-ug-dutch mailing list
> Typo3-ug-dutch at lists.netfielders.de
> http://lists.netfielders.de/cgi-bin/mailman/listinfo/typo3-ug-dutch
>
Met vriendelijke groeten, kind regards,
drs Ric van Westhreenen
AlterNET Internet BV
Archimedesstraat 2
3316 AB Dordrecht
T.078 635 1200
F.078 635 2010 / 0848 34 9697
---------------------
Meer leads uit uw website? Onze aanpak van zoekmachine marketing levert
concrete klantaanvragen op. Hoe we dat doen? Bel ons voor een afspraak op
078 635 1200.
---------------------
More information about the TYPO3-UG-dutch
mailing list