DHTML-Navi auf Adobe Spry Basis

Spider IT
Beiträge: 1416
Registriert: Fr 3. Dez 2004, 10:15

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von Spider IT » Sa 11. Jun 2011, 16:12

Hast du mein Beitrag nicht gelesen?

Gruß
René

marphin
Beiträge: 196
Registriert: Mo 24. Nov 2003, 13:01

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von marphin » Sa 11. Jun 2011, 16:29

Hallo Rene,

schon, komme damit aber nicht klar. Die idcat stimmt, die habe ich ja in den Mandanteneinstellungen festgelegt (falls du das meinst). Die Navigation funktioniert ja ansonsten auch und wenn ich eine neue Klasse anlege, habe ich das Problem ja noch immer. Ich müsste wissen, wie die Klasse aussehen soll und vor allem wo sie dann zur Anwendung kommt (also mit class=* oder ID=*). Vielleicht denke ich auch schon wieder viel zu kompliziert.

Viele Grüße
Martin

Oldperl
Beiträge: 4155
Registriert: Do 30. Jun 2005, 22:56
Wohnort: Eltmann, Unterfranken, Bayern
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von Oldperl » Sa 11. Jun 2011, 17:50

Hallo Martin,

folgende CSS in deine Datei aufnehmen

Code: Alles auswählen

ul.MenuBarHorizontal li.active a
{
    /*background-color: #33C;*/
    background-image: url('../images/navi_rot.gif');
    color: #FFF;
}
dann sollte es gehen.

Gruß aus Franken

Ortwin
ConLite 2.1, alternatives und stabiles Update von Contenido 4.8.x unter PHP 7.x - Download und Repo auf Gitport.de
phpBO Search Advanced - das Suchwort-Plugin für CONTENIDO 4.9
Mein Entwickler-Blog

marphin
Beiträge: 196
Registriert: Mo 24. Nov 2003, 13:01

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von marphin » Sa 11. Jun 2011, 18:54

Hallo Ortwin,

genau das ist die Lösung nach der ich schon so lange suche! - Vielen Dank!

Viele Grüße
Martin

mahu76
Beiträge: 41
Registriert: Mo 6. Jul 2009, 15:29
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von mahu76 » So 12. Jun 2011, 21:18

hallo zusammen,

hat vielleicht auch jemand ne idee wie ich der ausklappnavi ne ander hintergrundfarbe geben kann als die hauptnavi?

also ich habe zum bsp in der hauptnavi

startseite
wir über uns
produkte

diese 3 punkte habe z.b. aus hintergrundfarbe blau.

der menüpunkt produkte hat z.b. folgend untermenüpunkte die ausklappen
handschuhe
hosen
jacken

was muß ich nun tun das diese untermenüpunkte z.b.rot als hintergrundfarbe haben?

momentan ist es so das sie immer die selbe farbe habe wir die hauptmenüpunkte (egal was ich mache) ich bekomme es einfach nicht hin :-(

VG mahu

marphin
Beiträge: 196
Registriert: Mo 24. Nov 2003, 13:01

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von marphin » Mo 13. Jun 2011, 11:41

Hallo Mahu,

im folgenden Bereich der css musst du die Farbe festlegen, also durch "background-color: #******" erweitern:

Code: Alles auswählen

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarDown.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
	background-image: url(SpryMenuBarRight.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarDownHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
	background-image: url(SpryMenuBarRightHover.gif);
	background-repeat: no-repeat;
	background-position: 95% 50%;
}
Willst du im Untermenü eine andere Schriftfarbe haben, dann ebenfalls hier einfügen.

Viele Grüße
Martin

mahu76
Beiträge: 41
Registriert: Mo 6. Jul 2009, 15:29
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von mahu76 » Mo 13. Jun 2011, 14:00

hallo martin,

danke für deine hilfe!

meinst du es so?

es klappt nicht es bleibt immer beides gleich.

Code: Alles auswählen

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
   background-image: url(SpryMenuBarDown.gif);
   background-repeat: no-repeat;
   background-position: 95% 50%;
   background-color: red;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
   background-image: url(SpryMenuBarRight.gif);
   background-repeat: no-repeat;
   background-position: 95% 50%;
   background-color: red;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
   background-image: url(SpryMenuBarDownHover.gif);
   background-repeat: no-repeat;
   background-position: 95% 50%;
   background-color: red;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
   background-image: url(SpryMenuBarRightHover.gif);
   background-repeat: no-repeat;
   background-position: 95% 50%;
   background-color: red;
}



##############################################

anbei der von mir verwendete code:
hier ist nun hauptnavi blau und ausklappnavi auch blau.....




@charset "UTF-8";

/* SpryMenuBarVertical.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/
 
 
 
 .MenuBarItemSubmenu22 {
 
 background-color:#ff0000;
 }
 
 
 

/* The outermost container of the Menu Bar, a fixed width box with no margin or padding */
ul.MenuBarVertical
{
    margin: 0;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    cursor: default;
    width: 225px;
    height: 288px;
    
   
    
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
    z-index: 1000;
}
/* Menu item containers, position children relative to this container and are same fixed width as parent */
ul.MenuBarVertical li
{
    margin-left: 0px;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: relative;
    text-align: right;
    cursor: pointer;
    width: 225px;
    height: 32px;
      border-bottom: 1px dashed #ffffff;
   background-color: #0f6baf;
   border-right: 0px solid #ffffff;
   
   
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarVertical ul
{
    margin: 0 0 0 100%;
    padding: 0;
    list-style-type: none;
    font-size: 100%;
    position: absolute;
    z-index: 1020;
    cursor: default;
    left: -1000em;
    top: 0;

}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarVertical ul.MenuBarSubmenuVisible
{
    left: 0;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarVertical ul li
{
    width: 150px;
     height: 32px;
     border-bottom: 1px dashed #ffffff;
    text-align: right;
    margin-left: 2px;
    background-color: #0f6baf;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Outermost menu container has borders on all sides */
ul.MenuBarVertical
{
    border: 0px solid orange;

     
}
/* Submenu containers have borders on all sides */
ul.MenuBarVertical ul
{
    border: 0px solid red;
         
    
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarVertical a
{
    display: block;
    cursor: pointer;
  
    padding: 0.5em 0.75em;
    color: #333;
    text-decoration: none;
   
    
   
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarVertical a:hover, ul.MenuBarVertical a:focus
{
    background-color: #cecece;
    color: #FFF;
    height: 19px;
    border-bottom: 0px dashed red;
    
}
/*   Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarVertical a.MenuBarItemHover, ul.MenuBarVertical a.MenuBarItemSubmenuHover, ul.MenuBarVertical a.MenuBarSubmenuVisible
{
    background-color:# ;
    color: #ffffff;
    
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{
    
    background-repeat: no-repeat;
    background-position: 95% 50%;
      
}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
    background-repeat: no-repeat;
    background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarVertical iframe
{
    position: absolute;
    
    z-index: 1010;
    filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
    ul.MenuBarVertical li.MenuBarItemIE
    {
        display: inline;
        f\loat: left;
        
    }
}
ul.MenuBarVertical li.active a
{
    background-color: #b00e34;
    height: 19px;
    /*background-image: url('../images/navi_rot.gif');*/
    /*color: #FFF;*/
      border-bottom: 1px dashed #ffffff;
}

VG mahu
Zuletzt geändert von Oldperl am Di 14. Jun 2011, 10:46, insgesamt 1-mal geändert.
Grund: Moderation: Code-Tags ergänzt

marphin
Beiträge: 196
Registriert: Mo 24. Nov 2003, 13:01

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von marphin » Mo 13. Jun 2011, 14:23

Hallo mahu,

im folgenden Teil der css musst du die Farbe für das Untermenü (Submenue) definieren:

Code: Alles auswählen

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{

background-repeat: no-repeat;
background-position: 95% 50%;

}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: 95% 50%;
}
sollte dann so aussehen:

Code: Alles auswählen

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenu
{

background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #ffffff; /*Hier deine gewünschte Farbe festlegen!*/

}

/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarVertical a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: 95% 50%;
background-color: #cccccc; /*Hier deine gewünschte Farbe für Mouseover festlegen!*/
}
Die Schriftfarbe kannst du dann in beiden Klassen noch festlegen: color: #000000;

Dann müsste es gehen!

VG, Martin

mahu76
Beiträge: 41
Registriert: Mo 6. Jul 2009, 15:29
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von mahu76 » Mo 13. Jun 2011, 14:56

hallo martin,

leider kalppts nicht!

die HG fraben bleiben immer identisch :-(

VG mahu

marphin
Beiträge: 196
Registriert: Mo 24. Nov 2003, 13:01

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von marphin » Di 14. Jun 2011, 12:10

Sorry mahu,

ich habe da nicht richtig gelesen.
styles if there is a submenu under a given menu item
Das bedeutet, dass hier die Navigationspunkte formatiert werden, die Unterpunkte haben.

VG, Martin

mahu76
Beiträge: 41
Registriert: Mo 6. Jul 2009, 15:29
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von mahu76 » Di 14. Jun 2011, 12:17

hallo martin,

vielen dank für deine mühe!!

könnte man das irgendwie auch umgehen?
z.b. neue klassen irgendwie anlegen fürs untermenü?

VG mahu

marphin
Beiträge: 196
Registriert: Mo 24. Nov 2003, 13:01

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von marphin » Di 14. Jun 2011, 12:28

Hallo mahu,

Gerne.

Möglich ist es bestimmt, ähnlich wie bei der Standard-Navi. Dort kann man ja auch die verschiedenen Ebenen separat formatieren. Aber ich habe keinen Schimmer wie!

Ich habe ebenfalls noch ein Problem mit der Navi. Sie wird im Safari anders dargestellt und zerschießt so das Layout. Du bist nicht zufällig Mac-User oder hast Ahnung von den Unterschieden der Browser in Bezug auf die css? Ich habe schon eine eigene css extra für den Safari eingebunden und finde einfach keine Lösung.

VG, Martin

mahu76
Beiträge: 41
Registriert: Mo 6. Jul 2009, 15:29
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von mahu76 » Di 14. Jun 2011, 12:50

hallo martin,

ja das kenne ich damit habe ich auch schon stunden verbracht.
wobei bei mir immer der 6er ie das problem ist.

habe leider kein mac und auch kein safari.

für den ie hätte ich ein nettes tool für dich falls du es nicht schon kennst.
http://www.my-debugbar.com/wiki/IETester/HomePage

VG mahu

marphin
Beiträge: 196
Registriert: Mo 24. Nov 2003, 13:01

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von marphin » Di 14. Jun 2011, 13:04

Danke Mahu,

ich werde es mal auf meinem PC testen. Den habe ich nur noch um zu sehen, wie meine Seiten mit dem IE dargestellt werden. Da ich viel grafisch arbeite, habe ich aus Performancegründen vor einigen Jahren auf MAC umgestellt und bereue es nicht. Viel schneller, keine Viren und vor allem keine Abstürze. Und da derzeit viele auf MAC umsteigen, wird es immer wichtiger die Seiten für den Safari zu optimieren.

VG, Martin

ralfhaerter
Beiträge: 4
Registriert: So 20. Apr 2008, 15:28
Kontaktdaten:

Re: DHTML-Navi auf Adobe Spry Basis

Beitrag von ralfhaerter » Mo 4. Jul 2011, 23:21

yodatortenboxer hat geschrieben:Hiho,
ich habe für meine 4.8 Installation eine DHTML-Navi gebraucht. ...
Ioh, ich auch. :roll:

Works out of the box like a charm! (Tested with Contenido 4.8.15) Thank you very much.

Gesperrt