[FRAGE] Problem mit DropDown Menü

MarkusxX · 26. Juni 2014

Hallo, ich habe ein Menü mit Css erstellt nur leider mag das meine webseite nicht es tauchen einige fehler auf unterschiedlichen seiten auf nun gibt es darüber ein Drop Down das eig für Online und Offline ist wie folgt :

PHP:

<div id="netlog_account_menu">
    
    {literal}
    <script type="text/javascript">
        $(document).ready(function(){
            updateStatus('{/literal}{$aGlobalUser.status}{literal}');
        });
        
        
        function toggleStatusMenu(){
            if(document.getElementById('userStatusMenu').style.display == 'block'){
                document.getElementById('userStatusMenu').style.display = 'none';
            }else{
                document.getElementById('userStatusMenu').style.display = 'block';
            }
        }
        
        function changeUserStatus(rel){
            $(window).ajaxCall('netlogtemplate.updateStatus', 'status='+rel, true);
        }
        
        
        function updateStatus(rel){
            var translate = {
                    'online':'{/literal}{phrase var="netlogtemplate.online"}{literal}',
                    'away':'{/literal}{phrase var="netlogtemplate.away"}{literal}',
                    'busy':'{/literal}{phrase var="netlogtemplate.busy"}{literal}',
                    'out to lunch':'{/literal}{phrase var="netlogtemplate.out_to_lunch"}{literal}',
                    'unavailable':'{/literal}{phrase var="netlogtemplate.unavailable"}{literal}',
                    'invisible':'{/literal}{phrase var="netlogtemplate.invisible"}{literal}'
            };
            document.getElementById('userStatusMenu').style.display = 'none';
            $("#btnChangeStatus").html(translate[rel]);
            
            if( rel=='online' ) {
                $('#btnChangeStatus').removeClass().addClass('user_status user_online');
            } else if ( rel=='away' || rel=='out to lunch' ) {
                $('#btnChangeStatus').removeClass().addClass('user_status user_away');
            } else if ( rel=='busy' || rel=='unavailable' ) {
                $('#btnChangeStatus').removeClass().addClass('user_status user_busy');
            } else if ( rel=='invisible' ) {
                $('#btnChangeStatus').removeClass().addClass('user_status user_offline');
            }
        }
        
    </script>
    {/literal}
    
    <div class="netlog_account_menu_left">
        <div  id="holder_notify">
            {notification}
            <div style="clear: both;"></div>
        </div>
        <div style="clear: both;"></div>
    </div>
    <div class="netlog_account_menu_right">
        <div class="netlog_account_menu_userinfo">
            <div style="float:left">{$aGlobalUser|user:'':'':20:10}</div>
            <div class="userStatusContainer">
                <div class="userstatus_arrow" onclick='toggleStatusMenu()'><a href="javascript:void(0)" class="user_status user_online" id="btnChangeStatus" title="Change your status">online</a></div>
                <ul id="userStatusMenu" style="display:none;">
                    <li><a rel="online" href="javascript:void(0)" onclick="$(this).ajaxCall('netlogtemplate.updateStatus', 'status=online', true); return false;">{phrase var="netlogtemplate.online"}</a></li>
                    <li><a rel="away" href="javascript:void(0)" onclick="$(this).ajaxCall('netlogtemplate.updateStatus', 'status=away', true);return false;">{phrase var="netlogtemplate.away"}</a></li>
                    <li><a rel="busy" href="javascript:void(0)" onclick="$(this).ajaxCall('netlogtemplate.updateStatus', 'status=busy', true);return false;">{phrase var="netlogtemplate.busy"}</a></li>
                    <li><a rel="out to lunch" href="javascript:void(0)" onclick="$(this).ajaxCall('netlogtemplate.updateStatus', 'status=out to lunch', true);return false;">{phrase var="netlogtemplate.out_to_lunch"}</a></li>
                    <li><a rel="unavailable" href="javascript:void(0)" onclick="$(this).ajaxCall('netlogtemplate.updateStatus', 'status=unavailable', true);return false;">{phrase var="netlogtemplate.unavailable"}</a></li>
                    <li><a rel="invisible" href="javascript:void(0)"  onclick="$(this).ajaxCall('netlogtemplate.updateStatus', 'status=invisible', true);return false;">{phrase var="netlogtemplate.invisible"}</a></li>
                </ul>
            </div>
            <div class="topmenu_user_links">

Kann man das Umschreiben das es diese Funktionen erfüllt :

PHP:

   <div id='cssmenu'>
<ul>
   <li class='has-sub last'><a><span>Einstellungen</span></a>
      <ul>
         <li><a href='index.php?do=/user/profile/'><span>Profil bearbeiten</span></a></li>
         <li><a href='index.php?do=/user/privacy'><span>Privatsphäre</span></a></li>
         <li><a href='index.php?do=/user/setting/'><span>Kontoeinstellungen</span></a></li>
         <li class='last'><a href='index.php?do=/user/logout'><span>Logout</span></a></li>
      </ul>
   </li>
</ul>

</div>

Kann leider kein eigenes css nehmen sondern muss das script von oben verwenden können bzw etwas anders nur keine ahnung wie

miniA4kuser · 26. Juni 2014

MarkusxX schrieb:
Hallo, ich habe ein Menü mit Css erstellt nur leider mag das meine webseite nicht es tauchen einige fehler auf unterschiedlichen seiten auf nun gibt es darüber ein Drop Down das eig für Online und Offline ist wie folgt :

B A H N H O F ! ! !

Ich sehe bei dir nirgends CSS.
Was ist denn nun genau deine Fragen bzw.Problem?
<a href="javascript:void(0)" ... spätestens hier gelangen wir an die Schmerzgrenze!
Auch gibst du nicht an aus welcher Umgebung dein Codeschnipsel stammt, oder welches JavaScript-Framework du einsetzt usw usv...

MarkusxX · 26. Juni 2014

Also es geht nur oben um das Script ...

Unten das css interessiert nicht das kann ich eh nicht verwenden weil es verbugt auf meiner seite.

Oben das Javascript hatt ja ein DropDown nur das gibt ja online , busy usw aus ... ich will nur dieses Drop down in Javascript.

Unten das wie Einstellungen das soll in dieses Java Drop Down

kkapsner · 27. Juni 2014

Es ist immer noch nicht wirklich klarer, was du machen willst...

MarkusxX · 27. Juni 2014

Also das untere script ist zurzeit auf meiner Webseite und ist mit css verbunden :

Code:

#cssmenu {
  border: none;
  border: 0px;
  margin: 0px;
  padding: 0px;
  font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-size: 10px;
  font-weight: bold;
  width: 1px;
position: fixed;
}
#cssmenu ul {
  background: #333333;
  height: 30px;
  list-style: none;
  margin: 0;
  padding: 0;
position: absolute;

}
#cssmenu li {
  float: left;
  padding: 0px;


}
#cssmenu li a {
  background: #333333 url('seperator.png') bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 30px;
  margin: 0px;
  padding: 0px 20px;
  text-align: center;
  text-decoration: none;
}
#cssmenu > ul > li > a {
  color: #cccccc;
}
#cssmenu ul ul a {
  color: #cccccc;
}
#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #2580a2 url('hover.png') bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
}
#cssmenu li ul {
  background: #333333;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 100px;
  z-index: 200;
  /*top:1em;
	/*left:0;*/

}
#cssmenu li:hover ul {
  display: block;
}
#cssmenu li li {
  background: url('sub_sep.png') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 100px;
}
#cssmenu li:hover li a {
  background: none;
}
#cssmenu li ul a {
  display: block;
  height: 30px;
  font-size: 12px;
  font-style: normal;
  margin: 0px;
  padding: 0px 10px 0px 15px;
  text-align: left;
}
#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #2580a2 url('hover_sub.png') center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
}
#cssmenu p {
  clear: both;
}

Nur wenn ich auf meiner Webseite Navigiere verschwindet mein Drop Down einfach bzw läd kein Css mehr auf meiner Template aber nur auf einigen Seiten.

Oben das Javascript funktioniert einwandfrei auf allen Seiten ! Nur tut dieses Javascript aber son Status update ausgeben und das möchte ich gerne umschreiben das es folgende Funktionen kann :

<Einstellungen>
-Privatsphäre
-Kontoeinstellungen
-Abmelden

So wie bei dem Css Menü nur eben in Javascript ganz ohne css

kkapsner · 28. Juni 2014

Dann zeig' doch mal deine Seite und sag' uns, wie wir das Problem reproduzieren können.

Ein Menü mit JS zu erstellen ist extrem schlechter Stil (Stichwort: Barrierefreiheit).

MarkusxX · 30. Juni 2014

Ist leider noch nichts fertig und nur testweise ... wenn per PM .

kkapsner · 01. Juli 2014

Dann gib' uns einen Testlink, wo wir das Problem reproduzieren können. Kannst ja wieder vom Server löschen, wenn das Problem gelöst ist.

[FRAGE] Problem mit DropDown Menü

MarkusxX

New member

miniA4kuser

Lounge-Member

MarkusxX

New member

kkapsner

Super Moderator

MarkusxX

New member

kkapsner

Super Moderator

MarkusxX

New member

kkapsner

Super Moderator