MyBB.de Forum
Dropdownmenü - Druckversion

+- MyBB.de Forum (https://www.mybb.de/forum)
+-- Forum: Anpassungen (https://www.mybb.de/forum/forum-47.html)
+--- Forum: Theme-Diskussionen (https://www.mybb.de/forum/forum-84.html)
+--- Thema: Dropdownmenü (/thread-24344.html)



Dropdownmenü - Simon - 17.12.2011

Moin,
ich hätte auf meiner Seite http://www.gilde-kickass.de/ gerne ein Dropdown/DHTML Menü oben im Header, wo Portal etc steht. Jedoch soll die Formatierung genauso sein wie jetzt, lediglich dass die Punkte ausgefahren werden können. Wie kann ich das am besten erreichen?

lg simon


RE: Dropdownmenü - Jockl - 17.12.2011

z.B. gibt es hier ein paar nette Anregungen für entsprechende Möglichkeiten der Umsetzung:
http://www.cssplay.co.uk/menus/
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm


RE: Dropdownmenü - Simon - 17.12.2011

komm ich leider nicht weiter, da meine kenntnisse nicht wirklich tiefgehend sind und ich mir das meistens eher iwie zurechtschuster xD

wäre super wenn mir da jemand helfen könnte....
mein aktueller header:

PHP-Code:
<div id="fb-root"></div>
<
script>(function(dsid) {
  var 
jsfjs d.getElementsByTagName(s)[0];
  if (
d.getElementById(id)) {return;}
  
js d.createElement(s); js.id id;
  
js.src "//connect.facebook.net/de_DE/all.js#xfbml=1";
  
fjs.parentNode.insertBefore(jsfjs);
}(
document'script''facebook-jssdk'));</script>

<
div id="container">
        <
a name="top" id="top"></a>
        <
div id="header">
            <
div id="logo">
                <
div class="wrapper">
                    <
table width="100%" border="0">
  <
tr>
    <
td width="209px"><div align="left"><a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}alt="{$mybb->settings['bbname']}title="{$mybb->settings['bbname']}/></a></div></td>
    <
td width="75%"><div align="right">
<
script type="text/javascript" src="http://view.binlayer.com/ad-44374.js"></script>
    </
div></td>
  </
tr>
</
table>
</
div>
            </
div>

            <
div id="panel">
                <
div class="upper"><!-- This div(class="upper"is closed in the header_welcomeblock_member and header_welcomeblock_guest templates -->
                    <
div class="wrapper">
                        <
ul class="menu top_links">
                            <
li><a href="{$mybb->settings['bburl']}/portal.php" class="portal">{$lang->toplinks_portal}</a></li>
                            <
li><a href="{$mybb->settings['bburl']}/index.php" class="index">{$lang->toplinks_index}Forum</a></li>
                            <
li><a href="http://siege.hdblacker.de/?start" target="_blank" class="gs">{$lang->toplinks_gs}GS Converter</a></li>
                                                        <
li><a href="{$mybb->settings['bburl']}/teamspeak.php" class="ts">{$lang->toplinks_ts}Teamspeak</a></li>
                            <
li><a href="{$mybb->settings['bburl']}/search.php" class="search">{$lang->toplinks_search}</a></li>
                            <
li><a href="{$mybb->settings['bburl']}/memberlist.php" class="memberlist">{$lang->toplinks_memberlist}</a></li>
                            <
li><a href="{$mybb->settings['bburl']}/showteam.php" class="member">{$lang->toplinks_member}Member</a></li>                        
                        </
ul>
                        {
$welcomeblock}
            </
div>
        </
div>

        <
div id="content">
            <
div class="wrapper">
        {
$pm_notice}
                {
$bannedwarning}
                {
$bbclosedwarning}
                {
$unreadreports}{$unreadpmreports}
 {
$reportedreps}
                {
$pending_joinrequests}
<
div class="fb-like" data-href="http://www.gilde-kickass.de/" data-send="true" data-width="450" data-show-faces="false"></div>
                <
navigation>
            {
$board_messages}


                <
br /> 

meine aktuelle global.css:

PHP-Code:
body {
    
background#222 url(images/night/bg.png);
    
color#000;
    
text-aligncenter;
    
line-height1.4;
    
margin0;
    
    
font-familyTahomaVerdanaArialSans-Serif;
    
font-size13px;
}

a:link {
    
color#555;
    
text-decorationnone;
}

a:visited {
    
color#444;
    
text-decorationnone;
}

a:hovera:active {
    
color#000;
    
text-decorationunderline;
}

#container {
    
color#000;
    
text-alignleft;
    
line-height1.4;
    
width95%%;
    
min-width1200px;
    
max-width3000px;
    
margin0;
    
    
font-familyTahomaVerdanaArialSans-Serif;
    
font-size13px;
}

.
wrapper {
    
width95%;
    
min-width1170px;
    
max-width3000px;
    
marginauto auto;
}

#logo {
    
background#022338 url(images/night/header.png) top left repeat-x;
    
border-bottom1px solid #011929;
}

#content {
    
background#cfdfef;
    
widthauto !important;
    
padding20px 10px;
    
overflowhidden;
    
border-bottom1px solid #000;
}

#panel ul.menu {
    
margin0;
    
padding0;
    list-
stylenone;
}

#panel ul.menu li {
    
margin0 5px;
    
displayinline;
}

#panel ul.menu li a {
    
padding-left20px;
    
background-repeatno-repeat;
    
background-positionleft center;
}

#panel .upper ul.top_links {
    
floatright;
    
font-weightbold;
}

#panel .upper ul.top_links a.gs {
    
background-imageurl(images/night/crown.png);
}

#panel .upper ul.top_links a.ts {
    
background-imageurl(images/night/ts3.png);
}

#panel .upper ul.top_links a.wiki {
    
background-imageurl(images/night/kartoffel.gif);
}

#panel .upper ul.top_links a.index {
    
background-imageurl(images/night/forum_icon.gif);
}

#panel .upper ul.top_links a.member {
    
background-imageurl(images/night/portal.gif);
}
#panel .upper ul.top_links a.portal {
    
background-imageurl(images/night/home_icon.png);
}

#panel .upper ul.top_links a.search {
    
background-imageurl(images/night/icons/search.gif);
}

#panel .upper ul.top_links a.memberlist {
    
background-imageurl(images/night/icons/memberlist.gif);
}

#panel .upper ul.top_links a.calendar {
    
background-imageurl(images/night/icons/calendar.gif);
}

#panel .upper ul.top_links a.help {
    
background-imageurl(images/night/icons/help.gif);
}

#panel .upper a.logout {
    
font-weightbold;
    
backgroundurl(images/night/icons/logout.gifright no-repeat;
    
padding-right20px;
    
margin-left10px;
}

#panel .upper a.login,
#panel .upper a.lost_password {
    
backgroundurl(images/night/icons/login.gifno-repeat;
    
padding-left20px;
    
margin-left10px;
    
font-weightbold;
}

#panel .upper a.register {
    
backgroundurl(images/night/icons/logout.gifright no-repeat;
    
padding-right20px;
    
margin-left10px;
    
font-weightbold;
}

#panel .lower ul.panel_links {
    
floatleft;
}

#panel .lower ul.panel_links a.usercp {
    
background-imageurl(images/night/icons/usercp.gif);
}

#panel .lower ul.panel_links a.modcp {
    
background-imageurl(images/night/icons/modcp.gif);
}

#panel .lower ul.panel_links a.admincp {
    
background-imageurl(images/night/icons/admincp.gif);
}

#panel .lower ul.user_links {
    
floatright;
}

#panel .lower ul.user_links li a {
    
padding0;
}

#panel .upper {
    
background#0f0f0f url(images/night/tcat.png) repeat-x;
    
color#fff;
    
border-top1px solid #444;
    
border-bottom1px solid #000;
    
padding7px;
}

#panel .upper a:link,
#panel .upper a:visited,
#panel .upper a:hover,
#panel .upper a:active {
    
color#fff;
}

#panel .lower {
    
background#efefef;
    
color#999;
    
border-top1px solid #fff;
    
border-bottom1px solid #ccc;
    
overflowhidden;
    
padding5px;
}

#panel .lower a:link,
#panel .lower a:visited {
    
color#666;
}

#panel .lower a:hover,
#panel .lower a:active {
    
color#333;
    
text-decorationnone;
}

#panel .remember_me input {
    
vertical-alignmiddle;
    
margin: -3px 0 0 5px;
}

#panel input {
    
margin: -3px 0;
}

#panel input.button {
    
padding0;
}

#footer ul.menu {
    
margin0;
    
padding0;
    list-
stylenone;
}

#footer ul.menu li {
    
margin0 5px;
    
displayinline;
}

#footer .upper {
    
background#0f0f0f url(images/night/tcat.png) repeat-x;
    
padding6px;
    
overflowhidden;
    
    
font-size12px;
}

#footer a:link,
#footer a:visited {
    
color#aaa;
}

#footer a:hover,
#footer a:active {
    
color#fff;
    
text-decorationnone;
}

#footer .upper .language {
    
floatright;
    
margin: -2px;
}

#footer .upper .language select {
    
border-color#000;
}

#footer .upper ul.bottom_links {
    
floatleft;
    
margin3px 0 0 -5px;
}

#footer .lower {
    
background#022338 url(images/night/thead.png) top left repeat-x;
    
color#fff;
    
border-top1px solid #000;
    
border-bottom1px solid #011929;
    
overflowhidden;
    
padding6px;
    
font-size11px;
}

#footer .lower a:link,
#footer .lower a:visited {
    
color#fff;
    
font-weightbold;
}

#footer .lower a:hover,
#footer .lower a:active {
    
color#fff;
    
text-decorationunderline;
    
font-weightbold;
}

#footer .lower #current_time {
    
floatright;
}

fieldset {
    
border1px solid #ddd;
}

table {
    
color#000000;
    
font-size13px;
}

.
tborder {
    
background#fff;
    
width100%;
    
marginauto auto;
    
border1px solid #ccc;
    
padding1px;
}

.
thead {
    
background#022338 url(images/night/thead.png) top left repeat-x;
    
color#ffffff;
    
border-bottom1px solid #011929;
    
padding8px;
}

.
thead a:link {
    
color#ffffff;
    
text-decorationnone;
}

.
thead a:visited {
    
color#ffffff;
    
text-decorationnone;
}

.
thead a:hover, .thead a:active {
    
color#ffffff;
    
text-decorationunderline;
}

.
tcat {
    
background#0f0f0f url(images/night/tcat.png) repeat-x;
    
color#fff;
    
border-top1px solid #444;
    
border-bottom1px solid #000;
    
padding6px;
    
    
font-size12px;
}

.
tcat a:link {
    
color#fff;
}

.
tcat a:visited {
    
color#fff;
}

.
tcat a:hover, .tcat a:active {
    
color#fff;
}

.
trow1 {
    
background#f5f5f5;
    
border1px solid;
    
border-color#fff #ddd #ddd #fff;
}

.
trow2 {
    
background#efefef;
    
border1px solid;
    
border-color#fff #ddd #ddd #fff;
}

.
trow_shaded {
    
background#ffdde0;
    
border1px solid;
    
border-color#fff #ffb8be #ffb8be #fff;
}

.
trow_selected td {
    
background#FFFBD9;
    
color#000;
    
border-right-color#F7E86A;
    
border-bottom-color#F7E86A;
}

.
trow_selected td a:link,
.
trow_selected td a:visited,
.
trow_selected td a:hover,
.
trow_selected td a:active {
    
color#000;
}

.
trow_sep {
    
background#ddd;
    
color#000;
    
border-bottom1px solid #c5c5c5;
    
padding6px;
    
font-size12px;
    
font-weightbold;
}

.
tfoot {
    
background#022338 url(images/night/thead.png) top left repeat-x;
    
color#ffffff;
    
border-top1px solid #fff;
    
padding6px;
}

.
tfoot a:link {
    
color#ffffff;
    
text-decorationnone;
}

.
tfoot a:visited {
    
color#ffffff;
    
text-decorationnone;
}

.
tfoot a:hover, .tfoot a:active {
    
color#ffffff;
    
text-decorationunderline;
}

.
thead input.textbox,
.
thead select,
.
tfoot input.textbox,
.
tfoot select {
    
border1px solid #011929;
}

.
bottommenu {
    
background#efefef;
    
color#000000;
    
border1px solid #4874a3;
    
padding10px;
}

.
navigation {
    
color#000000;
    
font-size12px;
}

.
navigation a:link {
    
text-decorationnone;
}

.
navigation a:visited {
    
text-decorationnone;
}

.
navigation a:hover, .navigation a:active {
    
text-decorationnone;
}

.
navigation .active {
    
color#000000;
    
font-sizesmall;
    
font-weightbold;
}

.
smalltext {
    
font-size11px;
}

.
largetext {
    
font-size17px;
    
font-weightbold;
}

input.textbox {
    
background#ffffff;
    
color#000000;
    
border1px solid #ccc;
    
padding3px;
    
    
font-familyTahomaVerdanaArialSans-Serif;
}

textarea {
    
background#ffffff;
    
color#000000;
    
border1px solid #ccc;
    
padding2px;
    
line-height1.4;
    
    
font-familyTahomaVerdanaArialSans-Serif;
    
font-size13px;
}

select {
    
background#ffffff;
    
padding3px;
    
border1px solid #ccc;
    
    
font-familyTahomaVerdanaArialSans-Serif;
}

input.button {
    
padding2px;
    
cursorpointer;
    
font-familyTahomaVerdanaArialSans-Serif;
}

.
editor {
    
background#f1f1f1;
    
border1px solid #ccc;
}

.
editor_control_bar {
    
background#fff;
    
border1px solid #ccc;
}

.
autocomplete {
    
background#fff;
    
colorblack;
    
border1px solid #ccc;
    
padding1px;
}

.
autocomplete_selected {
    
background#023a61;
    
color#fff;
}

.
popup_menu {
    
background#fff;
    
border1px solid #ccc;
}

.
popup_menu .popup_item {
    
background#efefef;
    
color#000;
}

.
popup_menu .popup_item:hover {
    
background#023a61;
    
color#fff;
}

.
trow_reputation_positive {
    
background#ccffcc;
}

.
trow_reputation_negative {
    
background#ffcccc;
}

.
reputation_positive {
    
colorgreen;
}

.
reputation_neutral {
    
color#444;
}

.
reputation_negative {
    
colorred;
}

.
invalid_field {
    
border1px solid #f30;
    
color#f30;
}

.
valid_field {
    
border1px solid #0c0;
}

.
validation_error {
    
backgroundurl(images/invalid.gifno-repeat center left;
    
color#f30;
    
margin5px 0;
    
padding5px;
    
font-weightbold;
    
font-size11px;
    
padding-left22px;
}

.
validation_success {
    
backgroundurl(images/valid.gifno-repeat center left;
    
color#00b200;
    
margin5px 0;
    
padding5px;
    
font-weightbold;
    
font-size11px;
    
padding-left22px;
}

.
validation_loading {
    
backgroundurl(images/spinner.gifno-repeat center left;
    
color#555;
    
margin5px 0;
    
padding5px;
    
font-weightbold;
    
font-size11px;
    
padding-left22px;
}

/* Additional CSS (Master) */
img {
    
bordernone;
}

.
clear {
    
clearboth;
}

.
hidden {
    
displaynone;
    
floatnone;
    
width1%;
}

.
hiddenrow {
    
displaynone;
}

.
selectall {
    
background#FFFBD9;
    
border-bottom1px solid #F7E86A;
    
color#000;
    
text-aligncenter;
}

.
float_left {
    
floatleft;
}

.
float_right {
    
floatright;
}

.
expcolimage {
    
floatright;
    
widthauto;
    
vertical-alignmiddle;
    
margin-top3px;
}

img.attachment {
    
border1px solid #E9E5D7;
    
padding2px;
}

hr {
    
background-color#000000;
    
color#000000;
    
height1px;
    
border0px;
}

#debug {
    
floatright;
    
text-alignright;
    
margin-top20px;
    
    
font-size11px;
}

blockquote {
    
border1px solid #ccc;
    
margin0;
    
background#fff;
    
padding4px;
}

blockquote cite {
    
font-weightbold;
    
border-bottom1px solid #ccc;
    
font-stylenormal;
    
displayblock;
    
margin4px 0;
}

blockquote cite span {
    
floatright;
    
font-weightnormal;
}

blockquote cite span.highlight {
    
floatnone;
    
font-weightbold;
    
padding-bottom0;
}

.
codeblock {
    
background#fff;
    
border1px solid #ccc;
    
padding4px;
}

.
codeblock .title {
    
border-bottom1px solid #ccc;
    
font-weightbold;
    
margin4px 0;
}

.
codeblock code {
    
overflowauto;
    
heightauto;
    
max-height200px;
    
displayblock;
    
font-familyMonacoConsolasCouriermonospace;
    
font-size13px;
}

.
subforumicon {
    
border0;
    
vertical-alignmiddle;
}

.
separator {
    
margin5px;
    
padding0;
    
height0px;
    
font-size1px;
    list-
style-typenone;
}

form {
    
margin0;
    
padding0;
}

.
popup_menu .popup_item_container {
    
margin1px;
    
text-alignleft;
}

.
popup_menu .popup_item {
    
displayblock;
    
padding4px;
    
white-spacenowrap;
    
    
text-decorationnone;
}

.
popup_menu a.popup_item:hover {
    
text-decorationnone;
}

.
autocomplete {
    
text-alignleft;
}

.
subject_new {
    
font-weightbold;
}

.
highlight {
    
background#FFFFCC;
    
padding-top3px;
    
padding-bottom3px;
}

.
pm_alert {
    
background#FFF6BF;
    
border1px solid #FFD324;
    
text-aligncenter;
    
padding5px 20px;
    
margin-bottom15px;
    
font-size11px;
}

.
red_alert {
    
background#FBE3E4;
    
border1px solid #A5161A;
    
color#A5161A;
    
text-aligncenter;
    
padding5px 20px;
    
margin-bottom15px;
    
font-size11px;
}

.
high_warning {
    
color#CC0000;
}

.
moderate_warning {
    
color#F3611B;
}

.
low_warning {
    
color#AE5700;
}

div.error {
    
padding5px 10px;
    
border-top2px solid #FFD324;
    
border-bottom2px solid #FFD324;
    
background#FFF6BF;
    
font-size12px;
}

div.error p {
    
margin0;
    
color#000;
    
font-weightnormal;
}

div.error p em {
    
font-stylenormal;
    
font-weightbold;
    
padding-left24px;
    
displayblock;
    
color#C00;
    
backgroundurl(images/error.gifno-repeat 0;
}

div.error.ul {
    
margin-left24px;
}

.
online {
    
color#15A018;
}

.
offline {
    
color#C7C7C7;
}

.
pagination {
    
font-size11px;
    
padding-top10px;
    
margin-bottom5px;
}

.
tfoot .pagination, .tcat .pagination {
    
padding-top0;
}

.
pagination .pages {
    
font-weightbold;
}

.
pagination .pagination_current, .pagination a {
    
padding3px 6px;
    
margin-bottom3px;
}

.
pagination a {
    
background#f5f5f5;
    
border1px solid #ccc;
}

.
pagination .pagination_current {
    
backgroundnone;
    
color#000;
    
bordernone;
    
    
font-weightbold;
}

.
pagination a:hover {
    
background#023a61;
    
color#fff;
    
border-color#022338;
    
    
text-decorationnone;
}

.
thread_legend, .thread_legend dd {
    
margin0;
    
padding0;
}

.
thread_legend dd {
    
padding-bottom4px;
    
margin-right15px;
}

.
thread_legend img {
    
margin-right4px;
    
vertical-alignbottom;
}

.
forum_legend, .forum_legend dt, .forum_legend dd {
    
margin0;
    
padding0;
}

.
forum_legend dd {
    
floatleft;
    
margin-right10px;
    
margin-top7px;
}

.
forum_legend dt {
    
margin-right10px;
    
floatleft;
}

.
success_message {
    
color#00b200;
    
font-weightbold;
    
font-size10px;
    
margin-bottom10px;
}

.
error_message {
    
color#C00;
    
font-weightbold;
    
font-size10px;
    
margin-bottom10px;
}

.
post_body {
    
padding5px;
}

.
post_buttons {
    
background#f5f5f5;
    
padding3px 3px 0 3px;
    
border-bottom1px solid #ddd;
}

.
post_content {
    
padding5px 10px;
}

.
quick_jump {
    
backgroundurl(images/jump.gifno-repeat 0;
    
width13px;
    
height13px;
    
padding-left13px/* amount of padding needed for image to fully show */
    
vertical-alignmiddle;
    
bordernone;
}

.
repbox {
    
font-size:16px;
    
font-weightbold;
    
padding:5px 7px 5px 7px;
}

.
_neutral {
    
background-color:#FAFAFA;
    
color#999999;
    
border:1px solid #CCCCCC;
}

.
_minus {
    
background-color#FDD2D1;
    
color#CB0200;
    
border:1px solid #980201;
}

.
_plus {
    
background-color:#E8FCDC;
    
color#008800;
    
border:1px solid #008800;
}

.
pagination_breadcrumb {
    
background-color#efefef;
    
border1px solid #fff;
    
outline1px solid #ccc;
    
padding5px;
    
margin-top5px;
    
    
font-weightnormal;
}

.
pagination_breadcrumb_link {
    
vertical-alignmiddle;
    
cursorpointer;
}

form #message {
    
width500px;


es sollte ein klickbares menü sein, mit transparentem hintergrund, und die aufklappbaren an die schwarze leiste angepasst auf der das menü ist...wäre super nett