This is an old revision of the document!


CSS-meny

Du jobbar på ett företag och ditt ansvar är layout, HTML och CSS, en av dina kollegor jobbar med programmering och han har skrivit koden nedan, den genererar upp en array från databasen (nedan ser du resultatet) sen har han skrivit en funktion som skapar en lista av denna array.

Din uppgift är att fixa CSS:n så att det blir en vertikal och en horisontell meny beroende på om arrayen har klassen hmenu eller vmenu. Du skall använda dig av koden nedan för att skapa din meny. Hämta lite lorem ipsum text och gör en CSS-fil som du inkluderar. Kör du fast får du söka hjläp via nätet, du är den som kan mest om CSS på din arbetsplats så det finns ingen att fråga.

Dina HTML kod skall vara validerad som HTML5 och din CSS skall också vara validerad.

Här är en lite film för att ni skall förstå bättre vad ni skall göra.

OBS! För att göra det lite enklare så räcker det att menyn fungerar i en webläsare. (chrome/firefox)

<?php
$menu 
= array
(
    
'id' => 'MainMenu',
    
'class' => 'hmenu'// kan vara hmenu eller vmenu om man ändrar skall menyn ändras från vertikal till horisontell.
    
'menu' => array
        (
            
'news' => array
                (
                    
'0' => '?c=news',
                    
'1' => 'Nyheter',
                    
'2' => 'Läsa Nyheter',
                    
'3' => null,
                ),

            
'info' => array
                (
                    
'0' => '?c=info',
                    
'1' => 'Klubbinfo',
                    
'2' => 'Almän info från klubben',
                    
'3' => null
                
),

            
'section' => array
                (
                    
'0' => null,
                    
'1' => 'Sektioner',
                    
'2' => 'Våra olika sektioner',
                    
'3' =>  array (
                              
'1'  => array (
                                    
'0' => '?c=section&id=12',
                                    
'1' => 'Sport',
                                    
'2' => 'Sport sektionenen informerar',
                                    
'3' => null,
                                ),

                            
'2' => array
                                (
                                    
'0' => '?c=section&id=31',
                                    
'1' => 'Ansvar',
                                    
'2' => 'Ansvar',
                                    
'3' => null,
                                ),

                            
'3' => array
                                (
                                    
'0' => '?c=section&id=20',
                                    
'1' => 'Marknad',
                                    
'2' => 'Marknadsgruppen informerar',
                                    
'3' => null,
                                ),

                            
'4' => array
                                (
                                    
'0' => '?c=section&id=73',
                                    
'1' => 'Ekonomi',
                                    
'2' => 'Ekonomi',
                                    
'3' => null,
                                ),
                    ),
                ),

            
'teams' => array
                (
                    
'0' => null,
                    
'1' => 'Våra lag',
                    
'2' => 'Här finns våra lag',
                    
'3' => array
                        (
                            
'0' => array
                                (
                                    
'0' => '?c=teams&id=73',
                                    
'1' => 'A-lag',
                                    
'2' => 'A-lag',
                                    
'3' => null,
                                ),

                            
'1' => array
                                (
                                    
'0' => '?c=teams&id=73',
                                    
'1' => 'Dam',
                                    
'2' => 'Dam',
                                    
'3' => null,
                                ),

                            
'2' => array
                                (
                                    
'0' => '?c=teams&id=73',
                                    
'1' => 'J20',
                                    
'2' => 'J20',
                                    
'3' => null,
                                ),

                            
'3' => array
                                (
                                    
'0' => '?c=teams&id=73',
                                    
'1' => 'J18',
                                    
'2' => 'J18',
                                    
'3' => null,
                                ),

                            
'4' => array
                                (
                                    
'0' =>  '?c=teams&id=73',
                                    
'1' => 'U16',
                                    
'2' => 'U16',
                                    
'3' => null
                                
),

                            
'5' => array
                                (
                                    
'0' => '?c=teams&id=73',
                                    
'1' => 'U15',
                                    
'2' => 'U15',
                                    
'3' => null,
                                ),

                        ),

                ),

            
'login' => array
                (
                    
'0' => '?c=login',
                    
'1' => 'Logga in',
                    
'2' => 'För att logga in',
                    
'3' => null,
                ),

        ),

);


function 
print_menu($menu,$selected='') {
  if (
count($menu)) {
    
$ret '<div class="' $menu['class'] . '" id="' $menu['id'] . '">
    <ul>'
;
    foreach (
$menu['menu'] as $key => $val) {
      
$ret .= '<li id="' $menu['id'] . '_' $key '"';
      if (
$key == $selected) {
        
$ret .= ' class="selected"';
      }
      
$ret .= '>';
      if (!empty(
$val[0])) {
        
$ret .= '<a href="' str_replace('&','&amp;',$val[0]) . '" title="' $val[2] . '">' mb_convert_case($val[1], MB_CASE_UPPER"UTF-8") . '</a>';
      } else {
        
$ret .= '<a  title="' $val[2] . '">' mb_convert_case($val[1], MB_CASE_UPPER"UTF-8") . '</a>';
          }
      if (
is_array($val[3])) {
        
$ret .= '<ul>';
        foreach (
$val[3] as $subval) {
          
$ret .= '<li><a href="' str_replace'&','&amp;',$subval[0]) . '" title="' $subval[2] . '">' str_replace(' ''&nbsp;'mb_convert_case($subval[1], MB_CASE_UPPER"UTF-8")) . '</a></li>';
        }
        
$ret .= '</ul>';
      }
      
$ret .='</li>';
    }
    
$ret .= '</ul>
    </div>'
;
    return 
$ret;
  }
  return 
false;
}

// För att skriva ut menyn
echo print_menu($menu);