Søg
Avatar billede buxxy Praktikant
12. juni 2009 - 06:44 Der er 8 kommentarer og
1 løsning

<ul><li>-struktur, problematisk

Hej Eksperter!

Jeg er igang med at forsøge at lave mig en horisontal dropdown-menu skrevet i CSS og PHP/SQL.

Dertil skal jeg have indsat en <ul><li></li></ul>-struktur. Den struktur har jeg også lavet - men det er med links indskrevet manuelt i strukturen. Jeg har dog fået det hele til at køre via databasen i stedet, og at gemme data(links) / trække den ud igen virker helt fint nok.

Jeg kan dog kun, når jeg trækker mine links ud fra datbasen, få dem til at være i en struktur hvor alle links er synlige, og opstilt lodret under hinanden - dvs. ikke som jeg gerne ville have det = nemlig at det kun er selve "overskrifts-links" i menuen der er synlige. Indtil man selvfølgelig hoover med musen over.

I den manuelle kode jeg har lavet - hvor det ikke kører igennem databasen, men hvor menuen/strukturen virker efter hensigten - er koden skrevet som følgende:

------------------------------------------------------

<?php

add_to_head("<style type=\"text/css\">
/* menu styles */
#jsddm
{    margin: 0;
    padding: 0}

    #jsddm li
    {    float: left;
        list-style: none;
        border: 1px solid #999;
        font: 11px Arial,Tahoma}

    #jsddm li a
    {    display: block;
        background: #F4FADF url('".INFUSIONS."css_ddm/images/main_bg.gif') top left repeat-x;
        padding: 3px 12px;
        text-decoration: none;
        width: 116px;
        color: #fff;
        font-weight: bold;
        white-space: nowrap}

    #jsddm li a:hover
    {    color: #fff;
        background: #F4FADF url('".INFUSIONS."css_ddm/images/main_bg_hoover.gif') top left repeat-x;
        font-weight: bold;
        text-decoration: none}
       
        #jsddm li ul
        {    margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border: 1px solid #257813;}
       
            #jsddm li ul li
            {    float: none;
                border: 0;
                display: inline}
           
            #jsddm li ul li a
            {    width: 150px;
                padding-left: 17px;
                background: #fff url('".INFUSIONS."css_ddm/images/green_right.gif') 5px no-repeat;
                border: 0;
                color: #555}
           
            #jsddm li ul li a:hover
            {    background: #F4FADF url('".INFUSIONS."css_ddm/images/main_bg_hoover.gif') top left repeat-x;
                border: 0;
                text-decoration: none}
</style>");



add_to_head("<!-- script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js\" type=\"text/javascript\"></script -->");
add_to_head("<script src=\"".INCLUDES."jquery.js\" type=\"text/javascript\"></script>");
add_to_head("<script type=\"text/javascript\">
var timeout        = 500;
var closetimer        = 0;
var ddmenuitem      = 0;

function jsddm_open()
{    jsddm_canceltimer();
    jsddm_close();
    ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{    if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{    closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{    if(closetimer)
    {    window.clearTimeout(closetimer);
        closetimer = null;}}

$(document).ready(function()
{    $('#jsddm > li').bind('mouseover', jsddm_open);
    $('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
</script>");

echo "
<ul id='jsddm'>
    <li><a href='".BASEDIR."index.php'>Community</a>
        <ul>
            <li><a href='".BASEDIR."index.php'>Forside</a></li>
            <li><a href='".INFUSIONS."deluxe_weblink_portal/deluxe_weblink_portal.php'>Links</a></li>
            <li><a href='".INFUSIONS."advanced_articles/advanced_articles.php'>Artikler</a></li>
            <li><a href='".INFUSIONS."pro_download_panel/download.php?catid=0'>Downloads</a></li>
            <li><a href='".FORUM."index.php'>Debatforum</a></li>
            <li><a href='".BASEDIR."photogallery.php?album_id=1'>Tema Galleri</a></li>
            <li><a href='".BASEDIR."search.php'>Søg på siden</a></li>
            <li><a href='".BASEDIR."contact.php'>Kontakt siden</a></li>
            <li><a href='".INFUSIONS."personnel_list/personnel.php'>Teamet bag siden</a></li>
        </ul>
    </li>
    <li><a href='#'>Diverse</a>
        <ul>
            <li><a href='".INFUSIONS."site_map/site_map.php'>Site Map</a></li>
            <li><a href='".BASEDIR."viewpage.php?page_id=7'>Link til os</a></li>
            <li><a href='".BASEDIR."tellafriend.php'>Inviter en ven</a></li>
            <li><a href='".BASEDIR."viewpage.php?page_id=30'>Live bruger statistik v1.0</a></li>
            <li><a href='".INFUSIONS."pro_download_panel/download.php?did=70'>Live bruger statistik v2.0</a></li>
        </ul>
    </li>
    <li><a href='#'>Her testes/afprøves</a>
        <ul>
            <li><a href='".BASEDIR."articles2.php'>Artikler 2</a></li>
            <li><a href='".INFUSIONS."recipe_infusion/recipes.php'>Madopskrifter</a></li>
            <li><a href='".BASEDIR."viewpage.php?page_id=28'>Kryds og bolle</a></li>
            <li><a href='".INFUSIONS."clanmember_panel/clanmember_panel.php'>Klanmedlemmer</a></li>
            <li><a href='".BASEDIR."viewpage.php?page_id=31'>Round_n_Navigate</a></li>
            <li><a href='".INFUSIONS."tilmelding_panel/tilmelding_panel.php'>Lan Party Tilmelding</a></li>
            <li><a href='http://www.dvdside.dk/' target='_blank'>CSS-Navigation Menu</a></li>
            <li><a href='".BASEDIR."viewpage.php?page_id=37'>Se alverdens tv online</a></li>
        </ul>
    </li>
    <li><a href='#'>Webmaster Service</a>
        <ul>
            <li><a href='".BASEDIR."viewpage.php?page_id=2'>Farvekoder</a></li>
            <li><a href='".BASEDIR."viewpage.php?page_id=1'>Test dine Meta-tags</a></li>
            <li><a href='".BASEDIR."viewpage.php?page_id=29'>Test din internet hastighed</a></li>
            <li><a href='".BASEDIR."viewpage.php?page_id=33'>Hvor populær er din side ?</a></li>
            <li><a href='".BASEDIR."viewpage.php?page_id=34'>Hvem tilhører IP-adressen ?</a></li>
        </ul>
    </li>
    <li><a href='#'>Gratis installation</a>
        <ul>
            <li><a href='".INFUSIONS."custom_contact2/contact.php'>Bestil en gratis installation</a></li>
        </ul>
    </li>
    <li><a href='#'>Bruger forslag</a>
        <ul>
            <li><a href='".BASEDIR."submit.php?stype=l'>Foreslå et link</a></li>
            <li><a href='".BASEDIR."submit.php?stype=n'>Foreslå en nyhed</a></li>
            <li><a href='".BASEDIR."submit.php?stype=a'>Foreslå en artikel</a></li>
        </ul>
    </li>
    <li><a href='#'>Søg på siden</a>
        <ul>
            <li><a href='".BASEDIR."search.php'>Søg før du spørger!</a></li>
        </ul>
    </li>

</ul>\n";

?>

------------------------------------------------------

Så har jeg en anden kode, hvor udtræk af data (links) virker helt fint - men her kan jeg dog ikke se mig ud af, hvor der skal indsættes <ul><li> mm. for at opnå den ønskede struktur, som den er det i den forrige kode.

Jeg har prøvet på, synes jeg selv, alle mulige løsninger på kryds og tværs, men problemet synes desværre at være det bliver alt alt for u-overskueligt for mig.

Hvis her er en af "de skarpe knive i skuffen" - som lige præcis kan vise mig den struktur indsat - ja så vil jeg blive ovenud oprigtig glad! Det er nemlig eneste ting tilbage jeg mangler at få på plads.

Fortsat god dag!

Mvh.
Buxxy.
Avatar billede buxxy Praktikant
12. juni 2009 - 06:46 #1
Arrgh, jeg skulle måske lige huske at poste kode nr. 2 også. Den kommer her:

--------------------------------------------

<?php
global $settings;
include INFUSIONS."menu/infusion_db.php";

add_to_head("<style type=\"text/css\">
/* menu styles */
#jsddm
{    margin: 0;
    padding: 0}

    #jsddm li
    {    float: left;
        list-style: none;
        border: 1px solid #999;
        font: 11px Arial,Tahoma}

    #jsddm li a
    {    display: block;
        background: #F4FADF url('".INFUSIONS."css_ddm/images/main_bg.gif') top left repeat-x;
        padding: 3px 12px;
        text-decoration: none;
        width: 116px;
        color: #fff;
        font-weight: bold;
        white-space: nowrap}

    #jsddm li a:hover
    {    color: #fff;
        background: #F4FADF url('".INFUSIONS."css_ddm/images/main_bg_hoover.gif') top left repeat-x;
        font-weight: bold;
        text-decoration: none}
       
        #jsddm li ul
        {    margin: 0;
            padding: 0;
            position: absolute;
            visibility: hidden;
            border: 1px solid #257813;}
       
            #jsddm li ul li
            {    float: none;
                border: 0;
                display: inline}
           
            #jsddm li ul li a
            {    width: 150px;
                padding-left: 17px;
                background: #fff url('".INFUSIONS."css_ddm/images/green_right.gif') 5px no-repeat;
                border: 0;
                color: #555}
           
            #jsddm li ul li a:hover
            {    background: #F4FADF url('".INFUSIONS."css_ddm/images/main_bg_hoover.gif') top left repeat-x;
                border: 0;
                text-decoration: none}
</style>");

add_to_head("<!-- script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js\" type=\"text/javascript\"></script -->");
add_to_head("<script src=\"".INCLUDES."jquery.js\" type=\"text/javascript\"></script>");

add_to_head("<script type=\"text/javascript\">
var timeout        = 500;
var closetimer        = 0;
var ddmenuitem      = 0;

function jsddm_open()
{    jsddm_canceltimer();
    jsddm_close();
    ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');}

function jsddm_close()
{    if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{    closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{    if(closetimer)
    {    window.clearTimeout(closetimer);
        closetimer = null;}}

$(document).ready(function()
{    $('#jsddm > li').bind('mouseover', jsddm_open);
    $('#jsddm > li').bind('mouseout',  jsddm_timer);});

document.onclick = jsddm_close;
</script>");

$menusettings = dbarray(dbquery("SELECT * FROM ".DB_MENU_SETTINGS));

$msql = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='0' ORDER BY menu_order");
if (dbrows($msql) != 0) {
    while ($mdata = dbarray($msql)) {
      if (checkgroup($mdata['menu_access'])) {
echo "".$mdata['menu_name']."<br />\n";
if ($mdata['menu_link'] != "") {echo "".$mdata['menu_link']."<br />\n";}
       
$msql2 = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='".$mdata['menu_id']."' ORDER BY menu_order");
  if (dbrows($msql2) != 0) {
    while ($mdata2 = dbarray($msql2)) {
      if (checkgroup($mdata2['menu_access'])) {
if ($mdata2['menu_link'] != "") {echo "<a href='".$settings['siteurl'].$mdata2['menu_link']."'>".$mdata2['menu_name']."</a><br />\n";}
                   
$msql3 = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='".$mdata2['menu_id']."' ORDER BY menu_order");
  if (dbrows($msql3) != 0) {
    while ($mdata3 = dbarray($msql3)) {
      if (checkgroup($mdata3['menu_access'])) {
if ($mdata3['menu_link'] != "") {echo "<a href='".$settings['siteurl'].$mdata3['menu_link']."'>".$mdata3['menu_name']."</a><br />\n";}
    }
  }
}

    }
  }
}
   
    }
  }   
}

?>

--------------------------------------------
Avatar billede majbom Novice
12. juni 2009 - 07:25 #2
jeg gå ud fra at

$msql = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='0' ORDER BY menu_order");

er hovedmenu og

$msql2 = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='".$mdata['menu_id']."' ORDER BY menu_order");

er undermenu og

$msql3 = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='".$mdata2['menu_id']."' ORDER BY menu_order");

er under-undermenu?
Avatar billede buxxy Praktikant
12. juni 2009 - 07:34 #3
Hej splazz.

Det har du helt ret i. Koden er sikkert ikke den mest velskrevne, samt pæneste opstilt - men jeg håber du/I kan se meningen med det.
Avatar billede majbom Novice
12. juni 2009 - 08:57 #4
måske dette kan gøre det?

<?php

$msql = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='0' ORDER BY menu_order");
if (dbrows($msql) != 0) {
    echo "<ul id='jsddm'>";
    while ($mdata = dbarray($msql)) {
        if (checkgroup($mdata['menu_access'])) {
            if($mdata['menu_link']!=""){
                $link = '#';
            }else{
                $link = $mdata['menu_link'];
            }
            echo "<li><a href='".BASEDIR.$link."'>".$mdata['menu_name']."</a></li>";
            $msql2 = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='".$mdata['menu_id']."' ORDER BY menu_order");
            if (dbrows($msql2) != 0) {
                echo "<ul>";
                while ($mdata2 = dbarray($msql2)) {
                      if (checkgroup($mdata2['menu_access'])) {
                        if($mdata['menu_link']!=""){
                            $link = '#';
                        }else{
                            $link = $mdata2['menu_link'];
                        }
                        echo "<li><a href='".BASEDIR.$link."'>".$mdata2['menu_name']."</a></li>";
                        $msql3 = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='".$mdata2['menu_id']."' ORDER BY menu_order");
                        if (dbrows($msql3) != 0) {
                            echo "<ul>";
                            while ($mdata3 = dbarray($msql3)) {
                                if (checkgroup($mdata3['menu_access'])) {
                                    if($mdata['menu_link']!=""){
                                        $link = '#';
                                    }else{
                                        $link = $mdata2['menu_link'];
                                    }
                                    echo "<li><a href='".BASEDIR.$link."'>".$mdata2['menu_name']."</a></li>";
                                }
                            }
                            echo "</ul>";
                        }
                    }
                }
                echo "</ul>";
            }
        }
    }
    echo "</ul>\n";
}

?>

jeg kan ikke helt gennemskue din struktur, men du kan jo lige se om det er der henad :)
Avatar billede buxxy Praktikant
12. juni 2009 - 10:16 #5
Jamen det var da meget godt gennemskuet alligevel - for det var lige præcis det jeg ledte efter!

Det er dælme godt nok tæt på mange af de forsøg jeg har prøvet - men denne her er skisme den rigtige.

Tusind tak skal du have!!

Hvis du lægger et svar - så kan vi lige "afregne" med det samme.

Fortsat god dag - og weekend om ikke så længe!

Mvh.
Buxxy.
Avatar billede majbom Novice
12. juni 2009 - 10:24 #6
selv tak - ja man kan jo også stirre sig blind på det, hvis man har prøvet alt muligt...

og tak i lige måde :)
Avatar billede buxxy Praktikant
12. juni 2009 - 20:08 #7
Jeg fandt ud af at ovenstående løsning, ikke virker optimalt i FF, da alle menu-punkterne her står åbent.

Jeg flyttede så dog blot de 3 luk-tags </li> længere ned, så de står ved siden af </ul>. Løsningen bliver så som flg.:

<?php

$msql = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='0' ORDER BY menu_order");
if (dbrows($msql) != 0) {
    echo "<ul id='jsddm'>";
    while ($mdata = dbarray($msql)) {
        if (checkgroup($mdata['menu_access'])) {
            if($mdata['menu_link']!=""){
                $link = '#';
            }else{
                $link = $mdata['menu_link'];
            }
            echo "<li><a href='".BASEDIR.$link."'>".$mdata['menu_name']."</a>";
            $msql2 = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='".$mdata['menu_id']."' ORDER BY menu_order");
            if (dbrows($msql2) != 0) {
                echo "<ul>";
                while ($mdata2 = dbarray($msql2)) {
                      if (checkgroup($mdata2['menu_access'])) {
                        if($mdata['menu_link']!=""){
                            $link = '#';
                        }else{
                            $link = $mdata2['menu_link'];
                        }
                        echo "<li><a href='".BASEDIR.$link."'>".$mdata2['menu_name']."</a>";
                        $msql3 = dbquery("SELECT * FROM ".DB_MENUS." WHERE menu_cat='".$mdata2['menu_id']."' ORDER BY menu_order");
                        if (dbrows($msql3) != 0) {
                            echo "<ul>";
                            while ($mdata3 = dbarray($msql3)) {
                                if (checkgroup($mdata3['menu_access'])) {
                                    if($mdata['menu_link']!=""){
                                        $link = '#';
                                    }else{
                                        $link = $mdata2['menu_link'];
                                    }
                                    echo "<li><a href='".BASEDIR.$link."'>".$mdata2['menu_name']."</a>";
                                }
                            }
                            echo "</li></ul>";
                        }
                    }
                }
                echo "</li></ul>";
            }
        }
    }
    echo "</li></ul>\n";
}

?>

Mvh.
Buxxy.
Avatar billede majbom Novice
12. juni 2009 - 21:07 #8
tak for point, men det med at rykke </li> ned før </ul>, </li> afslutter hvert punkt, så det burde virke, det jeg har lavet...
Avatar billede buxxy Praktikant
12. juni 2009 - 22:05 #9
Ja ok - men det gør det nu ikke i FF..
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra PHP kategorien

Titel Indlæg Oprettet Seneste aktivitet
Bruge PHP til at hente hjemmeside med fsockopen Af Strawberry i PHP 18 29/01/202613:08 02/02/202610:29
Hjemmeside der virker både på mobil og computer Af Strawberry i PHP 6 25/01/202620:06 30/01/202618:53
Hvordan får jeg reCAPTCHA på min hjemmeside? Af Strawberry i PHP 1 20/01/202621:11 23/01/202618:04
MS Graph vis kalenderaftaler Af dane022 i PHP 0 06/11/202508:43 -
Hente data fra DEVICE via websocket Af nemlig i PHP 6 25/06/202512:37 25/06/202519:17
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 10:42 Access Import af csv fil - forkerte datatyper Af Henrik Berg Hansen i Andet software
29/0419:37 Hente CSV fil, indsætte CSV data i TABEL for JAVASCRIPT Af snestrup2000 i Programmeringsværktøjer
29/0412:23 Facebook Af hkv i Sociale medier
29/0411:38 JAVASCRIPT omdan ekstern variabel til søjleværdi .. Af snestrup2000 i Programmeringsværktøjer
29/0409:50 jeg mangler hjælp til opsætning af shop og Google ADS Af Hightech i Webhotel
White papers
Flere white papers »