Tutorials

Eine immer größer werdende Tutorialdatenbank.

PHP-Fusion Core

Aktuelle PHP-Fusion Vollversionen und Updates

Addon Downloads

Alle Downloads garantiert Kostenlos

Support 24/7

24 Stunden, 7 Tage die Woche, das ganze Jahr.

Thema ansehen
Vertikales Dropdownmenue Thema drucken
Benutzeravatar

Neuling


eddie Geschrieben am 30.03.2019 um 19:14
 #1 Beitrag drucken Top
Ich versuche ein vertikales Dropdownmenu links in den Panel einzubauen, den ich anstelle der standartmässigen Menüs verwenden möchte.
Oben unterhalb des Headers ist ein Dropdownmenu installiert welches auch funktioniert
In der theme.php Datei habe ich die Stelle gefunden der bearbeitet werden muss.
Download Code  Code
//Content
       if (LEFT) { echo "<div id='side-border-left'>".LEFT."</div>\n"; }


Aber irgendwie weiss ich leider nicht wie ich es einfügen soll.
Hier die theme.php
Download Code  Code
if (!defined("IN_FUSION")) { die("Access Denied"); }
require_once INCLUDES."theme_functions_include.php";

define("THEME_WIDTH", "1150px");
define("THEME_BULLET", "<img src='".THEME."images/bullet.png' style='padding-bottom: 1px;' alt='' />");

function render_page($license=false) {

global $settings, $main_style;


   
    //Header
   echo "<div class='center $main_style' padding='0' style='background-color:#e7e4e3;width:".THEME_WIDTH.";'>\n";
   echo "<div class='floatfix'>\n";
   echo "<div class='sub-header floatfix'>\n";
    echo '<img src="http://localhost/themes/bz/images/header.png" padding="0" alt="Willkommen auf Meiner Seite">';
   echo "</div></div>\n";
   
   
   
    //Navigation-Anfang
echo "    <nav class=\"animenu\">   

    <ul>
    <li>
    <a href=\"".BASEDIR."news.php\">Home</a>
    <ul>

    </ul>
   
    <li>
    <a href=\"".BASEDIR."forum/index.php\">Forum</a>
    <ul>
    </ul>
    </li>
   <li>
    <a href=\"#".BASEDIR."\">test</a>
    <ul>
    <li><a href=\"".BASEDIR."contact.php\">test</a></li>
     <li><a href=\"".BASEDIR."contact.php\">test</a></li>
    <li><a href=\"".BASEDIR."contact.php\">test</a></li>
    </ul>
    </li>
    <li>
    <a href=\"#".BASEDIR."\">Mitglieder</a>
    <ul>
    <li><a href=\"".BASEDIR."infusions/su_friends_panel/my_friends.php\">Meine Freunde</a></li>
    <li><a href=\"".BASEDIR."submit.php?stype=p\">Foto einsenden</a></li>
    <li><a href=\"".BASEDIR."submit.php?stype=l\">Link einsenden</a></li>
    <li><a href=\"".BASEDIR."submit.php?stype=a\">Artikel Einsenden</a></li>
    </ul>
    </li>
    <li>
    <a href=\"#".BASEDIR."\">Rechtliches</a>
    <ul>
    <li><a href=\"".BASEDIR."viewpage.php?page_id=1\">Impressum</a></li>
    <li><a href=\"".BASEDIR."viewpage.php?page_id=2\">Datenschutz</a></li>
    <li><a href=\"".BASEDIR."contact.php\">Kontakt</a></li>
    </ul>
    </li>   
     <li>
    <a href=\"#".BASEDIR."\">Test</a>
    <ul>
   <li><a href=\"".BASEDIR."contact.php\">test</a></li>
     <li><a href=\"".BASEDIR."contact.php\">test</a></li>
    <li><a href=\"".BASEDIR."contact.php\">test</a></li>
    <li><a href=\"".BASEDIR."contact.php\">test</a></li>
     <li><a href=\"".BASEDIR."contact.php\">test</a></li>
    <li><a href=\"".BASEDIR."contact.php\">test</a></li>
    </ul>
    </li>
     <li>
    <a href=\"#".BASEDIR."\">test</a>
    <ul>
      <li><a href=\"".BASEDIR."contact.php\">test</a></li>
     <li><a href=\"".BASEDIR."contact.php\">test</a></li>
    <li><a href=\"".BASEDIR."contact.php\">test</a></li>
    </li>
     <li>
    <a href=\"".BASEDIR."forum/index.php\">FAQ</a>
    <ul>
    </ul>
    </li>
    </nav>
";
    //Navigation-Ende
   
   

   //Content
       if (LEFT) { echo "<div id='side-border-left'>".LEFT."</div>\n"; }
   if (RIGHT) { echo "<div id='side-border-right'>".RIGHT."</div>\n"; }
   echo "<div id='main-bg' class='clearfix'><div id='container'>".U_CENTER.CONTENT.L_CENTER."</div></div>\n";
   
   //Bottom
   echo "<div class='bottom floatfix'>".showsublinks("","bottom-menu")."</div>\n";
   
   //Footer
   echo "<div class='footer floatfix'>\n";
   echo "<div style='float:left;'>\n";
   if ($license == false) { echo showcopyright()."<br />\n"; } echo "Theme Dev.Rus by <a href='http://www.rusfusion.ru'>jikaka</a> Modifiziert durch Sascha Kirschstein\n";
   echo "</div>\n";
   echo "<div style='float:right;text-align:right;'>".stripslashes($settings['footer'])."<br/>".showcounter()."</div>\n";
   echo "</div></div>\n";
      

}

function render_comments($c_data, $c_info) {
   global $locale;
   opentable($locale['c100']);
   if (!empty($c_data)){
      echo "<div class='comments floatfix'>\n";
         $c_makepagenav = '';
         if ($c_info['c_makepagenav'] !== FALSE) {
         echo $c_makepagenav = "<div style='text-align:center;margin-bottom:5px;'>".$c_info['c_makepagenav']."</div>\n";
      }
         foreach($c_data as $data) {
         echo "<div class='tbl2'>\n";
         if ($data['edit_dell'] !== FALSE) {
            echo "<div style='float:right' class='comment_actions'>".$data['edit_dell']."\n</div>\n";
         }
         echo "<a href='".FUSION_REQUEST."#c".$data['comment_id']."' id='c".$data['comment_id']."' name='c".$data['comment_id']."'>#".$data['i']."</a> |\n";
         echo "<span class='comment-name'>".$data['comment_name']."</span>\n";
         echo "<span class='small'>".$data['comment_datestamp']."</span>\n";
         echo "</div>\n<div class='tbl1 comment_message'>".$data['comment_message']."</div>\n";
      }
      echo $c_makepagenav;
      if ($c_info['admin_link'] !== FALSE) {
         echo "<div style='float:right' class='comment_admin'>".$c_info['admin_link']."</div>\n";
      }
      echo "</div>\n";
   } else {
      echo $locale['c101']."\n";
   }
   closetable();   
}

function render_news($subject, $news, $info) {

   echo "<div class='capmain'>$subject</div>\n";
   echo "<div class='main-body floatfix'>".$info['cat_image'].$news."</div>\n";
   echo "<div class='news-footer'>\n";
   echo newsposter($info,"&middot;").newsopts($info,"&middot;").itemoptions("N",$info['news_id']);
   echo "</div>\n";

}

function render_article($subject, $article, $info) {
   
   echo "<div class='capmain'>$subject</div>\n";
   echo "<div class='main-body floatfix'>".($info['article_breaks'] == "y" ? nl2br($article) : $article)."</div>\n";
   echo "<div class='news-footer'>\n";
   echo articleposter($info,"&middot;").articleopts($info,"&middot;").itemoptions("A",$info['article_id']);
   echo "</div>\n";

}

function opentable($title) {

   echo "<div class='capmain'>$title</div>\n";
   echo "<div class='main-body floatfix'>\n";

}

function closetable() {

   echo "</div>\n";

}

function openside($title, $collapse = false, $state = "on") {
   
   global $panel_collapse; $panel_collapse = $collapse;
   
   echo "<div class='side-body-bg'>";
   echo "<div class='scapmain'>";
   if ($collapse == true) {
      $boxname = str_replace(" ", "", $title);
      echo "<div style='float:right;'>".panelbutton($state,$boxname)."</div>";
   }
   echo $title."</div>\n<div class='side-body floatfix'>\n";
   if ($collapse == true) { echo panelstate($state, $boxname); }

}

function closeside($collapse = false) {

   global $panel_collapse;

   if ($panel_collapse == true) { echo "</div>\n"; }
   echo "</div></div>\n";

}
?>

Hier habe ich auch die CSS.datei zu der theme.php
brauche eine Hilfe
danke

Zusammengefügt am 30. März 2019 um 19:19:04:
Hier die Css.Datei zu der theme.php.
Habe es oben vergessen einzufügen vergessen einzufügen:
Download Code  Code
a {
   color: #759A1F;
   text-decoration: none;
}

a:hover {
   color: #759A1F;
   text-decoration: underline;
}

a.side {
   color: #759A1F;
   text-decoration: none;
}

a:hover.side {
   color: #759A1F;
   text-decoration: underline;
}

a.white, li.white a {
   color: #759A1F;
   text-decoration: none;
}

a:hover.white, li.white a:hover {
   color: #759A1F;
   text-decoration: underline;
}

a.menu, li.menu a {
   color: #fff;
   text-decoration: none;
   border-right: 1px solid #3f3f3f;
   padding: 10px 15px 10px 15px;
}

a:hover.menu, li.menu a:hover {
   color: #759A1F;
   text-decoration: none;
   background-color: #333333;
   padding: 10px 15px 10px 15px;
}

a.bottom-menu, li.bottom-menu a {
   color: #759A1F;
   font-weight: bold;
   text-transform: uppercase;
   text-decoration: none;
   padding: 10px 15px 10px 15px;
}

a:hover.bottom-menu, li.bottom-menu a:hover {
   color: #5eaad5;
   text-decoration: none;
}

body {
   color: #555;
   background: #303030 url(images/header-bg.gif) top repeat-x;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   margin: 10px;
}

form {
   margin: 0px;
}

hr {
   height: 1px;
   border: 1px solid #eee;
}


top_link {
    color: #000;
}



hr.side-hr {
   height: 1px;
   border: 1px solid #eee;
}

td {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
}

pre {
   font-family: Verdana, Tahoma, Arial, Sans-Serif;
   font-size: 11px;
}

.alt {
   color: #555;
}
 
.outer-border {
   border: 1px solid #000;
}

.sub-header {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #fff;
   background-color: #59685a;
   border-left: 1px solid #040404;
   border-right: 1px solid #040404;
   padding: 0px 0px 0px 0px;
}

.sub-header ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   width: auto;
}

.sub-header ul li {
   display: block;
   float: left;
   margin: 0px;
}

.sub-header ul li.first-link .bullet {
   display: none;
}

.full-header {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #ddd;
   background-color: #222222;
   padding: 10px;
}

.footer {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #555;
   background-color: #000;
   padding: 5px;
}

.bottom {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   text-align: center;
   color: #555;
   background-color: #101010;
   padding: 10px 15px 10px 15px;
}

.bottom ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
   width: auto;
}

.bottom li {
   display: inline;
}

.admin-message {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   text-align: center;
   color: #FFF;
   background-color: #FF5B5B;
   border: 1px solid #9D0000;
   padding: 3px 4px 5px 4px;
   margin-bottom: 5px;
}

.noscript-message {
   color: #555;
   background-color: #f6f6f6;
   border: 2px solid #e1e1e1;
   padding: 10px 0 10px 40px;
   margin-bottom: 10px;
}


.nocomments-message { }

.button {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #555;
   background-color: #f1f1f1;
   height: 20px;
   border: 1px solid #ccc;
   margin-top: 2px;
}

.bbcode {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #555;
   background-color: #f1f1f1;
   border: 1px solid #ccc;
   margin-top: 2px;
}

.bbcode-popup {
   font-size: 11px;
   color: #555;
   background-color: #fff;
   padding: 4px;
}

.textbox {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 10px;
   color: #555;
   background-color: #f8f8f8;
   border: 1px solid #ccc;
}

div.emulated-fieldset {
   position: relative;
   margin: 20px 0px 10px 0px;
   border: 1px solid #ccc;
   width: 320px;
   background: inherit;
}
div.emulated-fieldset span.emulated-legend {
   display: inline;
   position: absolute;
   top: -12px;
   margin: 0 5px;
   padding: 4px;
   background: inherit;
}
div.emulated-fieldset div.attachments-list {
   padding: 10px 3px 3px 3px;
   width: 320px;
}

.main-body {
   font-size: 11px;
   color: #555;
   background-color: #FFF;
   border-left: 1px solid #d7d4d3;
   border-right: 1px solid #d7d4d3;
   padding: 3px 6px 6px 6px;
   margin-bottom: 10px;
}

.side-body {
   font-size: 11px;
   color: #958984;
   background-color: #fff;
   border: 1px solid #C1BAB7;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
   padding: 6px;
}

.side-body-bg {
   background-color: #D8D3D1;
   border: 1px solid #C1BAB7;
   padding: 4px;
   margin: 0px 0px 10px 0px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

#main-bg {
   color: #555;
   background-color: #ffffff;
   padding: 10px 5px 5px 5px;
}

.ui-sortable { margin: 0; padding: 0; }

.side-both #main-bg {margin: 0 225px;}
.side-left #main-bg {margin-left: 225px;}
.side-right #main-bg {margin-right: 225px;}
.side-left #side-border-right {display: none;}
.side-right #side-border-left {display: none;}

.center {
   margin: 0 auto;
}
   
* html #main-bg {
   height: 0px;   
}

.border {
   border: 1px solid #e1e1e1;
   margin-bottom: 5px;
}

#side-border-left {
   color: #777;
   background-color: #e7e4e3;
   float: left;
   padding: 10px 0px 10px 10px;
   width: 210px;
}

#side-border-right {
   color: #777;
   background-color: #e7e4e3;
   float: right;
   padding: 10px 10px 10px 0px;
   width: 210px;
}

.news-category {
   border: 0;
   margin: 3px 5px 0 0;
   float: left;
}

.news-footer {
   text-align: right;
   font-size: 10px;
   color: #555;
   background-color: #fff;
   border-left: 1px solid #d7d4d3;
   border-right: 1px solid #d7d4d3;
   border-bottom: 1px solid #d7d4d3;
   padding: 3px 4px 4px 4px;
   margin: -10px 0px 10px 0px;
}

.barmain {
   font-family: Verdana, Tahoma, Arial, Sans-Serif;
   font-size: 10px;
   color: #aaa;
   padding: 4px;
}

.capmain {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 14px;
   font-weight: bold;
   color: #666;
   background-color: #D8D3D1;
   border: 1px solid #C1BAB7;
   padding: 6px;
}

.scapmain {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 12px;
   font-weight: bold;
   color: #666;
   padding: 4px;
    text-align: center;
}

.tbl-border {
   border: 1px solid #e1e1e1;
}

.tbl {
   font-size: 11px;
   color: #555;
   background-color: #fff;
   padding: 4px;
}

.tbl1 {
   font-size: 11px;
   color: #555;
   background-color: #fff;
   padding: 4px;
}

.tbl2 {
   font-size: 11px;
   color: #555;
   background-color: #f1f1f1;
   padding: 4px;
}

.tbl-error  {
   color: #AC260F;
   font-weight: bold;
   background-color: #FCCAC2;
   border: 2px solid #EB5339;
}

.forum-caption {
   font-size: 11px;
   font-weight: bold;
   color: #888;
   background-color: #f1f1f1;
   padding: 2px 4px 4px 4px;
}

.forum_breadcrumbs {
   font-family: Verdana, Helvetica, sans-serif;
   font-size: 13px;
   font-style: italic;
   font-weight: normal;
   background: #fff4cc url(images/right.gif) 6px 5px no-repeat;
   border-top: 1px solid #ffdc70;
   border-bottom: 1px solid #ffdc70;
   padding: 5px 6px 5px 30px;
   margin: 0;
}

.forum_thread_user_post {
    background-color: #fff;
   border-top: 2px dashed #eee;
   border-bottom: 2px dashed #eee;
}

.forum_thread_user_info {
   background-color: #eee;
   border-top: 2px solid #fff;
   border-right: 2px solid #fff;
   border-bottom: 2px solid #fff;
}

.forum_thread_table {
   border-spacing: 0;
   border: 0;
}

.forum_thread_user_name {
   border-top: 2px solid #fff;
}

.forum_thread_post_date {
   border-top: 2px solid #fff;
}

.forum_thread_ip {
   border-bottom: 2px solid #fff;
}

.forum_thread_userbar {
   border-bottom: 2px solid #fff;
}

/* Profile spesific classes */
.profile, .profile_category {
   width: 500px;
}

.edit-profile {
   width: 500px;
}

.profile_user_reason {
   color: #ff6666;
   font-weight: bold;
}

.quote {
   font-size: 11px;
   color: #555;
   background-color: #f8f8f8;
   padding: 4px;
   margin: 0px 20px 0px 20px;
   border: 1px solid #bbb;
}

.poll {
   height: 12px;
   border: 1px solid #bbb;
}

.comment-name {
   font-weight: bold;
   color: #2E3F63;
}

.comment-main { }

.comment_admin { }

.shoutboxname {
   font-weight: bold;
   color: #2E3F63;
}

.shoutbox {
   color: #777;
}

.shoutboxdate {
   font-size: 10px;
   color: #888;
}

.small {
   font-size: 10px;
   font-weight: normal;
}

.small2 {
   font-size: 10px;
   font-weight: normal;
   color: #555;
}

.side-small {
   font-size: 10px;
   font-weight: normal;
   color: #555;
   background-color: #f6f6f6;
}

.side-label {
   color: #555;
   background-color: #f1f1f1;
   padding: 2px 2px 3px 2px;
}

/* Vertical Navigation */

#navigation h2 {
   font-size: 10px;
   color: #555;
   background-color: #f1f1f1;
   margin: 0;
   padding: 0px;
}
   
#navigation ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

* html #navigation ul li {
   height: 1%;
}

#navigation a {
   display: block;
   color: #337295;
   padding: 2px;
   text-decoration: none;
}

#navigation a:hover {
   color: #fff;
   background-color: #5eaad5;
}

/* Page Navigation */
.pagenav {
   padding: 0.4em;
}

.pagenav span {
   color: #fff;
   background-color: #005599;
   border: 1px solid #e1e1e1;
   padding: 0.2em 0.4em 0.2em 0.4em;
   margin: 0.2em;
}

.pagenav a {
   color: #005599;
   background-color: #fff;
   border: 1px solid #e1e1e1;
   padding: 0.2em 0.4em 0.2em 0.4em;
   margin: 0.2em;
   text-decoration: none;
}

.pagenav a:hover {
   color: #fff;
   background-color: #005599;
   margin: 0.2em;
   text-decoration: none;
}


/*Helpers*/
.center {margin: 0 auto;}
.content_center {text-align: center;}
.flleft {float: left !important;}
.flright {float: right !important;}
.clear {clear: both;}


/*IE Fixes*/
* html #main-bg {
   height: 1%;
   width: auto;
}
.clearfix:after {
   content:".";
   display:block;
   height:0;
   clear:both;
   visibility:hidden;
}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */
.floatfix {overflow:hidden;}
* html .floatfix {width:100%;}
.center, *[align="center"] {margin: 0 auto;}




.animenu > ul:after {
  content: "";
  display: table;
  clear: both;
}

.animenu {
  font: bold 13px Arial, Helvetica;
}
.animenu * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.animenu ul {
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  -ms-border-radius: 0px;
  -o-border-radius: 0px;
  border-radius: 0px;
}
.animenu li {
  position: relative;
}
.animenu li:hover > ul {
  opacity: 1;
  visibility: visible;
  margin: 0;
}
.animenu li:hover > a {
  color: white;
}
.animenu input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
.animenu label {
  display: none;
  cursor: pointer;
  user-select: none;
}

.animenu > ul {
  border: 1px solid #040404;
  background-color: #111111;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
  background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  background-image: -o-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
}
.animenu > ul > li {
  float: left;
  border-right: 1px solid #1e1e1e;
  -webkit-box-shadow: 1px 0 0 #444444;
  -moz-box-shadow: 1px 0 0 #444444;
  box-shadow: 1px 0 0 #444444;
}
.animenu > ul > li > a {
  float: left;
  padding: 1em 3em;
  text-transform: uppercase;
}
.animenu > ul a {
  color: #999999;
  text-decoration: none;
  text-shadow: 0 1px 0 #111111;
}
.animenu > ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  margin: 2em 0 0 0;
  background-color: #373737;
  background-image: none;
  -webkit-transition-property: margin, opacity;
  -moz-transition-property: margin, opacity;
  -o-transition-property: margin, opacity;
  transition-property: margin, opacity;
  -webkit-transition-duration: .15s;
  -moz-transition-duration: .15s;
  -o-transition-duration: .15s;
  transition-duration: .15s;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  -o-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
}
.animenu > ul ul li {
  display: block;
  -webkit-box-shadow: 0 1px 0 #1e1e1e, 0 2px 0 #515151;
  -moz-box-shadow: 0 1px 0 #1e1e1e, 0 2px 0 #515151;
  box-shadow: 0 1px 0 #1e1e1e, 0 2px 0 #515151;
}
.animenu > ul ul li:first-child > a {
  -webkit-border-radius: 3px 3px 0 0;
  -moz-border-radius: 3px 3px 0 0;
  -ms-border-radius: 3px 3px 0 0;
  -o-border-radius: 3px 3px 0 0;
  border-radius: 3px 3px 0 0;
}
.animenu > ul ul li:first-child > a:after {
  content: '';
  position: absolute;
  left: 4em;
  top: -12px;
  border: 6px solid transparent;
  border-bottom-color: inherit;
}
.animenu > ul ul li:last-child {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}
.animenu > ul ul li:last-child > a {
  -webkit-border-radius: 0 0 3px 3px;
  -moz-border-radius: 0 0 3px 3px;
  -ms-border-radius: 0 0 3px 3px;
  -o-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
}
.animenu > ul ul a {
  padding: 1em;
  width: 175px;
  display: block;
  border-color: #373737;
}
.animenu > ul ul a:hover {
    background-image: -webkit-linear-gradient(#98BE1A 0%, #5F8C4C 100%);
    background-image: -moz-linear-gradient(#98BE1A 0%, #5F8C4C 100%);
    background-image: -o-linear-gradient(#98BE1A 0%, #5F8C4C 100%);
    background-image: linear-gradient(#98BE1A 0%, #5F8C4C 100%);
    border-color: #0186ba;
}

@media screen and (max-width: 180px) {
  .animenu > ul, .animenu > ul ul {
    visibility: visible;
    opacity: 1;
    display: none;
  }

  .animenu input[type=checkbox]:checked ~ label,
  .animenu input[type=checkbox] ~ label:hover {
    color: white;
  }
  .animenu label {
    border: 1px solid #040404;
    background-color: #111111;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(255, 255, 255, 0)));
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    background-image: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;
    color: #999999;
    text-shadow: 0 1px 0 #111111;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    text-transform: uppercase;
    position: relative;
    display: block;
    padding: 1em 3em;
  }
  .animenu label:before {
    position: absolute;
    left: 0.5em;
    top: 0.2em;
    content: "\2261";
    font-size: 2em;
  }
  .animenu > ul {
    position: relative;
    border-color: #111111;
    margin: 0.5em 0 !important;
    padding: 0.25em;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #111111;
    background-image: none;
  }
  .animenu > ul:after {
    content: '';
    position: absolute;
    left: 2em;
    top: -12px;
    border: 6px solid transparent;
    border-bottom-color: inherit;
  }
  .animenu > ul li {
    display: block;
  }
  .animenu > ul > li {
    float: none;
    border: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background-color: #111111;
    background-image: none;
  }
  .animenu > ul > li > a {
    float: none;
    display: block;
    padding: 1em;
  }
  .animenu > ul ul {
    position: static;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    background-color: #2b2b2b;
    background-image: none;
    margin: 0;
    -webkit-transition-property: none;
    -moz-transition-property: none;
    -o-transition-property: none;
    transition-property: none;
  }
  .animenu > ul ul li:first-child > a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
  }
  .animenu > ul ul li:first-child > a:after {
    content: none;
  }
  .animenu > ul ul li:last-child > a {
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
  }
  .animenu > ul ul a {
    padding-left: 2em;
    display: block;
    width: auto;
  }
  .animenu input[type=checkbox]:checked ~ ul {
    display: block;
  }
  .animenu input[type=checkbox]:checked ~ ul ul {
    display: block;
  }
}
@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }

  to {
    padding: 0;
  }
}
Bearbeitet von eddie am 30.03.2019 um 19:19
Beiträge:
Benutzeravatar

Seiten Administrator


David Geschrieben am 31.03.2019 um 08:05
 #2 Beitrag drucken Top
Guten Morgen Eddie,

Nun ja, so leicht ist es leider nicht möglich, da dein vorhandenes Dropdown-Menü exklusiv als horizontale Lösung vorgesehen ist.

Zuerst brauchte man eine vertikale Lösung. Weiters sollte man diese dann nicht direkt in der theme.php einbauen, sondern als neues Panel im Adminbereich.
Liebe Grüße, euer David.


Aktiver PHP-Fusion Nutzer seit 3. September 2006
--------------------------------------------------------
PHP-Fusion Österreich Seitenbetreiber.
Beiträge: 419 
http://www.php-fusion.at/ 
Benutzeravatar

Neuling


eddie Geschrieben am 31.03.2019 um 22:02
 #3 Beitrag drucken Top
Hi David,
ja du hast recht momentan ist ein horizontales Dropdownmenu eingesetzt.
Also das ich muss mir ein Panel anlegen und die vertikale Navigation dort einfügen.
Ok.

Download Code  Code

<?
openside("Side Panel")
?>

Hier dann mein vertikales html Code??
<?
closeside();
?>



Wäre das so dann der richtige ansatz??

Zusammengefügt am 01. April 2019 um 01:42:12:
Ich habe nun versucht und auch recherchiert und hoffe das ich mit diesem Panel was anfangen kann??
Vertikales_navigations_panel abgekürzt in ver_navigations_panel
Download Code  Code

<?php

if (!defined("IN_FUSION")) { die("Access Denied"); }

include INFUSIONS."ver_navigation_panel";

if (file_exists(INFUSIONS."ver_navigation_panel/locale/".$settings['locale'].".php")) {
include INFUSIONS."ver_navigation_panel/locale/".$settings['locale'].".php";
} else {
include INFUSIONS."ver_navigation_panel/locale/German.php";
}

add_to_head("
<link rel='stylesheet' type='text/css' href='".INFUSIONS."ver_navigation_panel/style.css' />
");

openside($locale['ver_side']);


closeside();
?>


Zusammengefügt am 01. April 2019 um 15:09:47:
So versuche weiterhin aber will nicht richtig!.
hier der letzte Stand mit einem einem vertikalem Dropdownmenu:
Menu erscheint auf der Hp allerding nicht im Panel.
Wo mache ich den Fehler?

Download Code  Code
<?php

if (!defined("IN_FUSION")) { die("Access Denied"); }

include INFUSIONS."ver_navigation_panel";

if (file_exists(INFUSIONS."ver_navigation_panel/locale/".$settings['locale'].".php")) {
include INFUSIONS."ver_navigation_panel/locale/".$settings['locale'].".php";
} else {
include INFUSIONS."ver_navigation_panel/locale/German.php";
}

add_to_head("
<link rel='stylesheet' type='text/css' href='".INFUSIONS."ver_navigation_panel/style.css' />
");

openside($locale['ver_side']);
<nav class="navigation">
  <ul class="mainmenu">
    <li><a href="">Home</a></li>
    <li><a href="">Über uns</a></li>
    <li><a href="">FAQ</a>
      <ul class="submenu">
        <li><a href="">Regeln</a></li>
        <li><a href="">Verhalten</a></li>
      </ul>
    </li>
    <li><a href="">Kontakt</a></li>
  </ul>
</nav>

closeside();
?>


Und hier der style.css

Download Code  Code

html, body {
    font-family: Arial, Helvetica, sans-serif;
}

/* define a fixed width for the entire menu */
.navigation {
  width: 150px;
}

/* reset our lists to remove bullet points and padding */
.mainmenu, .submenu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
  display: block;
  background-color: #CCC;
  text-decoration: none;
  padding: 10px;
  color: #000;
}

/* add hover behaviour */
.mainmenu a:hover {
    background-color: #C5C5C5;
}


/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li:hover .submenu {
  display: block;
  max-height: 200px;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
  background-color: #999;
}

/* hover behaviour for links inside .submenu */
.submenu a:hover {
  background-color: #666;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

eddie hat folgendes Bild angehängt:
img_1.jpg
Bearbeitet von eddie am 01.04.2019 um 15:09
Beiträge:
Benutzeravatar

Seiten Administrator


David Geschrieben am 01.04.2019 um 17:44
 #4 Beitrag drucken Top
Du musst nach openside($variable); natürlich die PHP-Ausgabe mit ?> beenden, weil dann hast du ja reinen HTML Code.

Und vor closeside(); die PHP-Ausgabe wieder mit <?php beginnen.

Alternativ kannst du den HTML Code auch in echo ""; setzen. Aber dann bitte unbedingt die " und ' beachten.
Liebe Grüße, euer David.


Aktiver PHP-Fusion Nutzer seit 3. September 2006
--------------------------------------------------------
PHP-Fusion Österreich Seitenbetreiber.
Beiträge: 419 
http://www.php-fusion.at/ 
Benutzeravatar

Neuling


eddie Geschrieben am 02.04.2019 um 09:57
 #5 Beitrag drucken Top
Ja stimmt. Die Menu`s sind jetzt im Panel

thx
Beiträge:
Springe ins Forum:
Anzeige


Anmelden


Registrieren Passwort vergessen

RSS Feeds

Feeds abonieren

Letzte News
Letzte Threads
Anzeige

© Copyright 2019 PHP-Fusion.at | Alle Rechte vorbehalten.

© 2016 Real Space. All rights reserved | Design by W3layouts | 12,095,615 eindeutige Besuche
Powered by PHP-Fusion copyright © 2002 - 2019 by Nick Jones. Released as free software without warranties under GNU Affero GPL v3.