Navigation: mouse over: Ein-/Ausblenden von Unterpunkten? (II)

Bix

Leider hat Thread I zu keinem Ergebnis geführt. Mittlerweile habe ich aber konkretere Anforderungen.

Wie kann ich mittels CSS ein Ausklappmenue erzeugen, dass mir z.B. auf dem Template von Oberthema A die Children (Unterthemen) von Oberthema B anzeigt, wenn ich mit der Maus über den Menue-Punkt Oberthema B fahre.

Hintergrundinformation:

Das Blog besteht nur aus Pages. Jedes Page (Oberthema) hat verschiedene Children, also Unterthemen. Alle Pages (Oberthemen) liegen auf ihrem eigenen Template und zeigen jeweils auf der "eigenen" Page alle Children (Unterthemen) an.

Navitagtion der Page zu Oberthema A:

Oberthema A
----Unterthema U
----Unterthema V
Oberthema B
Oberthema C
Oberthema D
...

Navigation der Page zu Oberthema B:

Oberthema A
Oberthema B
-----Unterthema X
-----Unterthema Y
-----Unterthema Z
-----Unterthema O
Oberthema B
Oberthema C
Oberthema D
...

und so weiter.

Bis hier hin geht das mit der Funktion

Wobei "XX" die jeweilige ID der Page bzw. des Oberthemas bezeichnet.

Dieser dynamischen durch die WordPress-Pages bestimmten Liste voraus geht eine "feste" Liste, in der ich jeweils die URL der anderen Pages nenne. Also ungefähr so:

<li><a href="/wordpress/?page_id=33">Oberthema A</a></li>
<div id='current'>
<li><a href="/wordpress/?page_id=40">Oberthema B</a></li>
</div>
<ul>
<?php wp_list_pages("child_of=40&title_li="); ?>
</ul>

...

Und jetzt wiederhole ich nochmal meinen Wunsch:

Wie kann ich mittels CSS ein Aufklappmenue erzeugen,
dass mir auf dem Template von Oberthema A
die Unterthemen von Oberthema B anzeigt,
wenn ich mit der Maus über den Menue-Punkt Oberthema B fahre.

Daaaaaaaaanke! Bix

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Gast 1848

Meinst Du das so wie bei http://www.schreibklasse.de?

Bix

Ja, ja, ja, ja. Genau!!!! (Sag mal, als ich gestern auf die Adresse zugreifen wollte, ging nichts, heute 01.03.2006 08:30:35 fluppte es wie geschmiert)

Also, woher bekomme ich die Lösung? Was muss ich tun?

1000 Dank! Bix.

Bix

Jetzt sehe ich grade, dass es Jillij ist, der das programmiert hat. Mein Theme hat mit Jillij aber wenig zu tun. Ist anpassen der Navigation nicht eine Hundsarbeit?

Gruß, Bix.

MaD

eine Hundsarbeit ist wieder Ansichtssache ... da es ja in so in einigen Blogs zu sehen ist, denke ich, es kann nicht soviel Arbeit sein ...

http://www.lieber-libertas.de/

hier findest du auch so eine Navi ... also kein Einzelfall ... also so eine Navi macht sich ganz gut finde ich ... möchte jetzt auch so eine haben ;)

Gast 1848

Okay, ich würde mir an Deiner Stelle einfach das Jillij-Theme herunterladen und schauen, wie das da geregelt ist. Dann überträgst das auf Dein Theme. Oder Du nimmst das Jillij Theme und änderst es ab (hab ich bei Schreibklasse.de auch so gemacht). Ist einfacher, als das in ein anderes Theme einzubauen. Viel Erfolg - und melde Dich mal, ob's geklappt hat. V. PS.: Das Problem mit der Erreichbarkeit liegt an meinem Provider. Die wollen es aber in den Griff bekommen. Mal sehen, ob das klappt.

MaD

also ich hatte heute morgen mal etwas Langeweile und habe mich mal drangesetzt, so eine Navigation in einen bestehenden Blog einzubauen ...

war doch überrascht, also soviel Arbeit ist das gar nicht ... ich kann dir dazu ein kleines Tutorial schreiben, wenn du möchtest ...

interessant wäre vorher nur die Frage, soll das ganze die Sidebar ersetzen oder praktisch als zweite Navigation eingebaut werden ...

Bix

Zitat von MaD

Interessant wäre vorher nur die Frage, soll das ganze die Sidebar ersetzen oder praktisch als zweite Navigation eingebaut werden ...

Ein Tutorial wäre klasse!! Und Sidebar, weiß ich nicht genau. Es gibt keine Datei im Sinne von sidebar.php und die Navigation befindet sich normal innerhalb der jeweiligen Templates.

Ist es das, was Du wissen wolltest?

Gruß, Bix.

MaD

also im dem Jillij-Theme heißt die Datei komischerweise auch sidebar.php ... ich frage nur, weil wenn du auch noch praktisch eine normale sidebar rechts oder links haben möchtest, musst du noch ein paar weitere Änderungen vornehmen ...

aber ich fang erstmal mit dem Tutorial an ... denke übers WE müßte ich es schaffen ...

MaD

ok dann wollen wir mal ...

als erstes lädst du dir das jillij-Theme runter ... da brauchst du einige Dateien ...
dann nennst du auf deinem Space die Datei sidebar.php um in sidebar-alt.php (nur falls vorhanden)
dann musst du folgende Dateien/Ordner aus dem Jillij-Theme in deinen Theme-Ordner laden:

[INDENT]

den Ordner code
die Datei aplus.php
die Datei sidebar.php

[/INDENT]

die Datei header.php muss angepasst werden, die rote Zeile bitte einfügen ... den ersten Teil irgendwo oben im Header

PHP

<?php
            include( TEMPLATEPATH . "/aplus.php" );
        ?>

[INDENT]

PHP

<style type="text/css" media="screen">
  
         /* BEGIN IMAGE CSS */
            /*    To accomodate differing install paths of WordPress, images are referred only here,
                and not in the wp-layout.css file. If you prefer to use only CSS for colors and what
                not, then go right ahead and delete the following lines, and the image files. */
  
        body         { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgcolor.jpg"); }
            #page        { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickbgwide.jpg") repeat-y top; border: none; }
            #header     { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader.jpg") no-repeat bottom center; }
            #footer     { background: url("<?php bloginfo('stylesheet_directory'); ?>/images/kubrickfooter.jpg") no-repeat center;}
  
            #header     { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 198px; width: 758px; }
            #footer     { margin: 0 !important; margin: 0 0 0 1px; padding: 1px; height: 61px; width: 758px; }
             #headerimg     { margin: 7px 9px 0; height: 192px; width: 740px; }
         /* END IMAGE CSS */
         [COLOR=Red]@import "<?php echo aplus::cleanthemedir(); ?>/style.css";[/COLOR]
     </style>

Alles anzeigen

[/INDENT]

die Datei style.css muss ergänzt werden. die Position musst du natürlich an dein Design anpassen ... ist jetzt auf mein Design abgestimmt ...

[INDENT]

Code

y:0.9; /* for mozilla */       /* Rolling Menu Styles */
  
#meniu {
    color: #FFFFFF;
  
    margin: 0px 0px 0px 0px;
    text-align: left;
    top: 220px;
    width: 720px;
    height: auto;
}
  
.sidetable
{
    background: #000000;
    border: 0px;
    top: 200px;
    width: 740px;
    position: fixed;
    margin: 0 0 0 10px;
}
  
/* for "Hello login" */
#ConnectStatus {
    background-color: #333333;
    width: 200px;
    font-weight: bold;
    padding-left: 16px;
    padding-right: 16px;
}
  
#sidemenu {
    display: block;
}
  
#sidemenu ul {
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
}
  
#sidemenu li {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    float: left;
    position: relative;
}
  
#sidemenu a {
    display: block;
    height: 19px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 16px;
    padding-right: 16px;
    color: #FFFFFF;
    text-decoration:none;
}
  
#sidemenu h2 {
    color: #FFFFFF;
    font-size: 1.2em;
    weight:bold;
}
  
#sidemenu ul li ul a {
    width: 200px;
}
  
#sidemenu li li {
    width: 100%;
    float: none;
}
  
#sidemenu li li ul {
    top: 0px;
    left: 0;
}
  
#sidemenu li li:hover ul {
    left: 100%;
}
  
/* initialy hide all sub sidemenus */
#sidemenu li ul {
    display: none;
    position: absolute;
    z-index: 10;
}
  
/* display them on hover */
#sidemenu li:hover>ul {
    display: block;
}
  
/* this is needed if you want to style #sidemenu div - force containment of floated LIs inside of main UL */
#sidemenuList:after {
    content: ".";
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
}
  
#sidemenuList {
    display: inline-block;
}
  
#sidemenu ul li .monthsMenu a{
    width: auto;
    height: auto;
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}
  
/* define the consecutive colors */
#sidemenu ul li a{
    background: #000000;
}
  
#sidemenu ul li a:hover {
    background: #333333;
}
  
#sidemenu ul li ul li a{
    background: #333333;
    filter:alpha(opacity=90); /* for IE */
            -moz-opacit
            opacity: 0.9; /* for safari */
            khtml-opacity: 0.9 /* for konquerer and older safari */
  
}
  
#sidemenu ul li ul li a:hover {
    background: #666666;
}
  
.searchtable
{
    background: #333333;
    filter:alpha(opacity=90); /* for IE */
            -moz-opacity:0.9; /* for mozilla */
            opacity: 0.9; /* for safari */
        khtml-opacity: 0.9 /* for konquerer and older safari */
}

Alles anzeigen

[/INDENT]

das sollte es eigentlich schon gewesen sein, hoffe ich habe nix vergessen ... die Navigation musst/kannst du dann noch nach deinen Wünschen anpassen ... das Aussehen halt in der Style.css und den Rest in der sidebar.php ...

wenn man das ganze als zusätzliche Navigation haben möchte zu der normalen Sidebar, müssen noch ein paar kleine Änderungen vorgenommen werden ... bei Interesse fragen ...

killercup

soviel arbeit ist das wirklich nicht! ich hab das jillij theme übersetzt (siehe signatur) und dann meine komplette seite daran angepasst. und das jillij-menü ist echt klasse! :D

Monika

Hi killercup funktioniert diese Navi auch mit Permalinks?

und ein bisschen HTML ist durcheinandergerutscht

[url)http://validator.w3.org/check?uri=http…og%2F%3Fp%3D231]html verrutscht[/url]

lg

killercup

mit permalinks nicht geteste - also nix negatives zu sagen! ;)

ich weiß, das der code sicherlich nicht korrekt ist und ich wollte ihn imemr schon mal validieren, bin aber nie dazu gekommen!! :( Kümmer ich mich mal drum... sind zum größten teil eh mehr tippfehler :rolleyes:

Jeriko

Hab noch per Zufall http://www.tamba2.org.uk/wordpress/collapse/ gefunden, ist glaube ich dasselbe, was du möchtest, nur mit Mausklick statt Hover.

Gruß Jeriko

Bix

…..und warum bekomme ich keine Veröffentlichungshinweise mehr

(bin grad mal wieder zufällig hier und sehe u.a. das Tutorial von MaD. Ist ja Spitze. Während einer der nächsten längeren Frühlingsabende werde ich mich mal dran machen...; oder kann mir einer von Euch die Sache auf die seitliche Navigation umstricken. Danke, Bix.)

MaD

hehe ... werde das Tutorial aber noch erweitern ... weil so macht es noch Probleme mit dem ie ... das habe ich aber auch schon gelöst bekommen (jedenfalls zu 75%) :rolleyes: ... aber das ist dann nur eine weitere css-Datei, die in den Ordner kommt ...

und mit dem Umstricken in das seitliche Menü ... daran arbeite ich auch schon, allerdings bin ich noch im Anfangsstadium ... denke mich gerade erst in Ajax rein ...

aber wenn du Fragen und/oder Probs hast, kannst mich gern anschreiben ...

simondevries

Habe gerade diese tolle Nav-Bar hier gefunden und das Tutorial bei mir angewendet. Leider ist das Ergebnis wenig beeindruckend :-(: http://www.vries-land.de

Ich habe weder ein horizontales Menu, noch ist meine alte Sidebar noch da und ein bißchen Durcheinander ist auch noch dabei ... Irgendwelche Ideen?

MaD

Zitat von simondevries

Habe gerade diese tolle Nav-Bar hier gefunden und das Tutorial bei mir angewendet. Leider ist das Ergebnis wenig beeindruckend :-(: http://www.vries-land.de
Ich habe weder ein horizontales Menu, noch ist meine alte Sidebar noch da und ein bißchen Durcheinander ist auch noch dabei ... Irgendwelche Ideen?

zeig doch mal bitte deine Dateien, die du dafür geänderst hast ... dann schau ich mir das mal an (müßten also die header.php und die css datei sein)

simondevries

Das ist sehr nett. Die header.php:

PHP

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">


<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />


<?php include( TEMPLATEPATH . "/aplus.php" );?>


<title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>


<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->


<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />


<style type="text/css" media="screen">
body { background: url("http://www.vries-land.de/wp-content/themes/richkubrick-10/images/richbgcolor.jpg"); }    
#page { background: url("http://www.vries-land.de/wp-content/themes/richkubrick-10/images/richbg.jpg") repeat-y top; border: none; }
#header { background: url("http://www.vries-land.de/wp-content/themes/richkubrick-10/images/richheader.jpg") no-repeat bottom center; margin: 0px 0px 0px 0px !important; 
margin:-28px 0 0 0px; 
padding:0px 1px; height: 200px; width: 758px;  }
#headerimg { margin: 0px 0px 0px 0px; height: 200px; width: 740px; } 
#footer { background: url("http://www.vries-land.de/wp-content/themes/richkubrick-10/images/richfooter.jpg") 
no-repeat bottom; border: none;}
  @import "<?php echo aplus::cleanthemedir(); ?>/style.css";
</style>


<?php wp_head(); ?>
</head>
<body>
<div id="page">
<div id="header">
<div id="headerimg"  onclick="location.href='http://vries-land.de/';" style="cursor: pointer;">
<div class="description">


<hr />

Alles anzeigen

simondevries

und die style.css-Teil1:

CSS

/* Begin Typography & Colors */


body {font-size: 62.5%; /* Resets 1em to 10px */
    font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
    background-color: #d5d6d7;
    color: #333;
    text-align: center;}


#page {background-color: white;
     border: 1px solid #959596;
    text-align: left;}


#header {background-color: #73a0c5;}


#content {font-size: 1.2em}


.widecolumn .entry p {font-size: 1.05em;}


.narrowcolumn .entry, .widecolumn .entry {line-height: 1.4em;}


.widecolumn {line-height: 1.6em;}
    
.narrowcolumn .postmetadata {text-align: left;}


.alt {background-color: #f8f8f8;
        border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;}


#footer {background-color: #eee;}


small {font-family: Arial, Helvetica, Sans-Serif;
    font-size: 0.9em;
    line-height: 1.5em;}


h1, h2, h3 {font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Arial, Sans-Serif;
    font-weight: bold;}


h1 {font-size: 4em; text-align: center;}


#headerimg .description {
    font-size: 1.2em;
    text-align: left;}


.description{padding-top: 165px;}


h2 {font-size: 1.6em;}


h2.pagetitle {font-size: 1.6em;}


#sidebar h2 {font-family: 'Lucida Grande', Verdana, Sans-Serif;
    font-size: 1.2em;}


h3 {font-size: 1.3em;}


h1, h1 a, h1 a:hover, h1 a:visited, #headerimg .description 
        {text-decoration: none;
    color: white;}


h2, h2 a, h2 a:visited, h3, h3 a, h3 a:visited {color: #333;}


h2, h2 a, h2 a:hover, h2 a:visited, h3, h3 a, h3 a:hover, h3 a:visited, #sidebar h2, #wp-calendar caption, cite {text-decoration: none;}


.entry p a:visited {color: #b85b5a;}


.commentlist li, #commentform input, #commentform textarea {
    font: 0.9em 'Lucida Grande', Verdana, Arial, Sans-Serif;}
    
.commentlist li {font-weight: bold;}


.commentlist cite, .commentlist cite a {
    font-weight: bold;
    font-style: normal;
    font-size: 1.1em;}


.commentlist p {font-weight: normal;
    line-height: 1.5em;
    text-transform: none;}


#commentform p {font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;}


.commentmetadata {font-weight: normal;}


#sidebar {font: 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;}


small, #sidebar ul ul li, #sidebar ul ol li, .nocomments, .postmetadata, blockquote,          strike {color: #777;}
    
code {font: 1.1em 'Courier New', Courier, Fixed;}


acronym, abbr, span.caps
{font-size: 0.9em; letter-spacing: .07em;}


a, h2 a:hover, h3 a:hover {color: #06c;
    text-decoration: none;}


a:hover {color: #147; text-decoration: underline;}
    
#wp-calendar #prev a {font-size: 9pt;}


#wp-calendar a {text-decoration: none;}


#wp-calendar caption {font: bold 1.3em 'Lucida Grande', Verdana, Arial, Sans-Serif;
    text-align: center;}


#wp-calendar th {font-style: normal;
    text-transform: capitalize;}


.sidebar h5 {color: #000;
    font-size: 1.2em;
    margin: 0 0 10px 0;
    padding: 10px 0 2px 0;
    width: 93%;
        text-align: right;
    border-bottom: 1px solid #000;}


.sidebar h6 {color: #000;
    font-size: 1.2em;
    margin: 0 0 10px 0;
    padding: 10px 0 2px 0;
    width: 93%;
        text-align: left;
    border-bottom: 1px solid #000;}




/* End Typography & Colors */






/* Begin Structure */


body {margin: 0; padding: 0; }


#page {background-color: white;
    margin: 20px auto;
    padding: 0;
    width: 760px;
    border: 1px solid #959596;}
    
#header {padding: 0 auto;
    margin: 0;   
    height: 200px;
    width: 100%;
    background-color: #73a0c5;}


#headerimg {margin: 0px 0px 0px 0px!important;
        margin: 0px 0px 0px 0px;
        height: 200px;
    width: 100%;}


.narrowcolumn {float: left;
    padding: 0 0 20px 45px;
    margin: 0px 0 0;
    width: 450px;}


.widecolumn {padding: 10px 0 20px 0;
    margin: 5px 0 0 150px;
    width: 450px;}
    
.post {margin: 0 0 40px;
    text-align: justify;}


.widecolumn .post {margin: 0;}


.narrowcolumn .postmetadata {padding-top: 5px;}


.widecolumn .postmetadata {margin: 30px 0;}


.widecolumn .smallattachment {
    text-align: center;
    float: left;
    width: 128px;
    margin: 5px 5px 5px 0px; }


.widecolumn .attachment {
    text-align: center;
    margin: 5px 0px;
}


.postmetadata {
    clear: left;
}


#footer {
    padding: 0 0 0 1px;
    margin: 0 auto;
    width: 760px;
    clear: both;
    }


#footer p {
    margin: 0;
    padding: 20px 0;
    text-align: center;
    }
/* End Structure */






/*    Begin Headers */
h1 {
    padding-top: 70px;
    margin: 0;
    }


h2 {
    margin: 30px 0 0;
    }


h2.pagetitle {
    margin-top: 30px;
    text-align: center;
}


#sidebar h2 {
    margin: 5px 0 0;
    padding: 0;
    }


h3 {
    padding: 0;
    margin: 30px 0 0;
    }


h3.comments {
    padding: 0;
    margin: 40px auto 20px ;
    }
/* End Headers */






/* Begin Images */
p img {
    padding: 0;
    max-width: 100%;
    }


/*    Using 'class="alignright"' on an image will (who would've
    thought?!) align the image to the right. And using 'class="centered',
    will of course center the image. This is much better than using
    align="center", being much more futureproof (and valid) */
    
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }
    
img.alignright {
    padding: 4px;
    margin: 0 0 2px 7px;
    display: inline;
    }


img.alignleft {
    padding: 4px;
    margin: 0 7px 2px 0;
    display: inline;
    }


.alignright {
    float: right;
    }
    
.alignleft {
    float: left
    }




/* End Images */






/* Begin Lists


    Special stylized non-IE bullets
    Do not work in Internet Explorer, which merely default to normal bullets. */


html>body .entry ul {
    margin-left: 0px;
    padding: 0 0 0 30px;
    list-style: none;
    padding-left: 10px;
    text-indent: -10px;
    } 


html>body .entry li {
    margin: 7px 0 8px 10px;
    }


.entry ul li:before, #sidebar ul ul li:before {
    content: "\00BB \0020";
    }


.entry ol {
    padding: 0 0 0 35px;
    margin: 0;
    }


.entry ol li {
    margin: 0;
    padding: 0;
    }


.postmetadata ul, .postmetadata li {
    display: inline;
    list-style-type: none;
    list-style-image: none;
    }
    
#sidebar ul, #sidebar ul ol {
    margin: 0;
    padding: 0;
    }


#sidebar ul li {
    list-style-type: none;
    list-style-image: none;
    margin-bottom: 15px;
    }


#sidebar ul p, #sidebar ul select {
    margin: 5px 0 8px;
    }


#sidebar ul ul, #sidebar ul ol {
    margin: 5px 0 0 10px;
    }


#sidebar ul ul ul, #sidebar ul ol {
    margin: 0 0 0 10px;
    }


ol li, #sidebar ul ol li {
    list-style: decimal outside;
    }


#sidebar ul ul li, #sidebar ul ol li {
    margin: 3px 0 0;
    padding: 0;
    }
/* End Entry Lists */






/* Begin Form Elements */
#searchform {
    margin: 10px auto;
    padding: 5px 3px; 
    text-align: left;
    }


#sidebar #searchform #s {
    width: 115px;
    padding: 2px;
    }


#sidebar #searchsubmit {
    padding: 1px;
    }


.entry form { /* This is mainly for password protected posts, makes them look better. */
    text-align:center;
    }


select {
    width: 130px;
    }


#commentform input {
    width: 170px;
    padding: 2px;
    margin: 5px 5px 1px 0;
    }


#commentform textarea 
{width: 100%;
    padding: 2px;}


#commentform #submit {margin: 0;
    float: right;}
/* End Form Elements */

Alles anzeigen

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Navigation: mouse over: Ein-/Ausblenden von Unterpunkten? (II)

Jetzt mitmachen!