Dropdown menu widget uitlijnen in sidebar

  • yeldi

    (@yeldi)


    11 jaren, 10 maanden geleden

    Ik zou graag het dropdown menu welke ik heb geïnstalleerd als plugin en geplaatst in de widget aan de linkerzijde van mijn website, links willen uitlijnen.

    Ik kan de align aanpassen naar links, midden, rechts, wanneer ik kies in zijn eigen instellingen voor rechts dan lijnt die het menu keurig aan de linkerzijde uit in de sidebar, alleen het submenu wat dan vervolgens verschijnt als je met de muis erover heen gaat klapt dan vervolgens ook aan de linkerzijde uit en dat wil ik dus nu niet niet, ik wil het rechts uitgeklapt hebben.

    Op dit moment staat het menu dus links ingesteld en klapt het submenu rechts uit.

    Theme is oxygen en de plugin is dropdown menu van deze maker:
    http://shailan.com/wordpress/plugins/dropdown-menu/

    En natuurlijk de website waar het omgaat:
    http://rottweilernederland.nl

14 reacties aan het bekijken - 1 tot 14 (van in totaal 14)
  • Gin Hogenes

    (@ginh)

    11 jaren, 10 maanden geleden

    Hi Yeldi,

    Ik weet niet of je verstand hebt van css, maar door het volgende in de css aan te passen, lijnt het linker sidebar menu uit met het hoofdmenu

    .sidebar .widget ul {
    margin-left: 16px; }

    naar

    0px; of helemaal verwijderen

    groetjes,

    Gin

    Thread starter yeldi

    (@yeldi)

    11 jaren, 10 maanden geleden

    Hai Gin, enorm veel verstand heb ik er niet van, maar als je mij kan vertellen in welke template ben ik al een eind op weg 🙂

    Gin Hogenes

    (@ginh)

    11 jaren, 10 maanden geleden

    Probeer style.css eens.

    Als je de editor in wordpress opent, opent deze (als het goed is) automatisch

    En dan even Crtl+F voor .sidebar .widget ul

    Thread starter yeldi

    (@yeldi)

    11 jaren, 10 maanden geleden

    Hoi Gin,

    uitgeprobeerd op test pagina van ons, na een leuke ervaring van gisteren dat het een beetje fout ging:)
    Hij lijnt het menu blok keurig links uit zoals gewenst, echter ga er maar eens met je muis overheen, over het onderste menu in de linker sidebar het hoover menu wat tevoorschijn komt via fade in/out komt nu ook aan de linkerzijde tevoorschijn en dat laatste wilde we dus net rechts hebben (fade in/out)

    http://wordpress.rottweilernederland.nl/

    Thread starter yeldi

    (@yeldi)

    11 jaren, 10 maanden geleden

    Deze plugin ondersteund volgens mij wel een custom CSS in zijn eigen instellingen.

    Gin Hogenes

    (@ginh)

    11 jaren, 10 maanden geleden

    This might do the trick.
    De volgende css markup toevoegen

    .sidebar .widget ul.sub-menu {
    margin-left: 160px;
    }

    Vervolgens right en left uitzetten met “//”

    ul.dropdown-vertical.dropdown-align-right ul {
    top: 1px;
    //right: 99%;
    //left: auto;
    }

    Thread starter yeldi

    (@yeldi)

    11 jaren, 10 maanden geleden

    Hoi Gin,

    die laatste heb ik niet helemaal je wilt dat ik die commando’s hieronder zet:

    Widget unordered lists
    ————————————————————– */
    .sidebar .widget ul { margin-left: 0px;
    .sidebar .widget ul li a { color: #555;
    .sidebar .widget ul li a:hover { color: #000;
    .sidebar .widget ul li a { color: #555; }
    .sidebar .widget ul li a:hover { color: #000;

    Thread starter yeldi

    (@yeldi)

    11 jaren, 10 maanden geleden

    Ik bedacht mij net dat deze plugin zijn eigen lijst met php bestanden heeft, ik weet niet of je wat met deze informatie kunt

    Gin Hogenes

    (@ginh)

    11 jaren, 10 maanden geleden

    .sidebar .widget ul.sub-menu {
    margin-left: 160px;
    }

    deze kan je gewoon onder die lijst zetten ja.

    die andere: ul.dropdown-vertical.dropdown-align-right ul
    moet je kunnen vinden in de css van de plugin

    Niet aan de php zitten

    Thread starter yeldi

    (@yeldi)

    11 jaren, 10 maanden geleden

    Ik kopieer hier maar even de inhoud van: Bewerken dropdown-menu-widget/themes/shiny-black.css (niet actief)

    Ik kan die 2e regel namelijk niet terug vinden in deze css ik ben ervan uit gegaan dat ik dan de css moet hebben van welk menu ik op dat moment gebruik, je kan namelijk kiezen uit 8 verschillende soorten menu’s

    @charset “UTF-8”;

    /** Container */
    .shailan-dropdown-menu .dropdown-horizontal-container, .shailan-dropdown-menu ul.dropdown-vertical>li { background:#000 url(‘images/shiny-black/menu_bg.jpg’) repeat-x; height:31px; }

    ul.dropdown{
    background-color:transparent;
    border-width:0px;
    padding:0px;
    }
    ul.dropdown li{ line-height:30px; }
    ul.dropdown li ul li{ line-height:1.5em; }
    ul.dropdown li a{ display:block; margin-left:25px; vertical-align:middle; text-align:center; text-decoration:none; padding:8px 25px 8px 0px; font:normal 11px Tahoma; text-decoration:none; }

    ul.dropdown li.hover, ul.dropdown li:hover { cursor: default; }

    ul.dropdown ul { border-bottom:1px solid #ddd; }
    *html ul.dropdown ul{width:100px;}
    ul.dropdown ul li{ display:block; text-align:left; }
    ul.dropdown ul li a{ min-width:100px; text-align:left; }
    *html ul.dropdown ul li a{ width:100px; }

    /** Right align fix */
    ul.dropdown-align-right li{ border-width: 0px 0px 0px 1px; }

    /** Hover effect */
    ul.dropdown li.hover, ul.dropdown li:hover { background: url(‘images/shiny-black/button_active.gif’) top left no-repeat; color: #7dbbc6; }
    ul.dropdown li.hover a, ul.dropdown li:hover a{ background: url(‘images/shiny-black/button_active2.gif’) top right no-repeat; color: #7dbbc6; }
    ul.dropdown li.hover ul li a, ul.dropdown li:hover ul li a{ background: transparent; }

    /** Link colors */
    ul.dropdown li a,
    ul.dropdown li a:link,
    ul.dropdown li a:visited { color: #7dbbc6; text-decoration: none; }
    ul.dropdown li a:hover { color: #7dbbc6; }
    ul.dropdown li a:active { color: #fff; }

    /** Sub menus */
    ul.dropdown ul { margin:0px; padding:0px; background:#fff; border:1px solid #808080; }
    ul.dropdown ul li a{ color:#444; border:1px solid #fff; padding:2px; margin:2px; height:auto; }
    ul.dropdown li.hover ul li a:hover, ul.dropdown li:hover ul li a:hover{ background-image:none; color:#444; border:1px solid #45ADE4; background-color:#DBF0F9; font:normal 11px Tahoma; text-decoration:none; }
    ul.dropdown ul li.hover, ul.dropdown ul li:hover { background: transparent; }

    /** Current menu item */
    li.current-cat a, li.current_page_item a, li.current-menu-item a,
    li.current-cat a:link, li.current_page_item a:link, li.current-menu-item a:link,
    li.current-cat a:visited, li.current_page_item a:visited, li.current-menu-item a:visited{ color: #fff; }

    /** Not current fix */
    li.current_page_item ul a, li.current_page_item ul a:visited, li.current_page_item ul a:link { color: #7dbbc6; }

    /** Ancestor */
    li.current_page_ancestor a,li.current_page_ancestor a:visited, li.current_page_ancestor a:link {text-decoration:underline;}
    li.current-menu-ancestor a,li.current-menu-ancestor a:visited, li.current-menu-ancestor a:link {text-decoration:underline;}

    /** Not ancestor fix */
    li.current_page_ancestor ul a, li.current_page_ancestor ul a:visited, li.current_page_ancestor ul a:link {text-decoration:none;}
    li.current-menu-ancestor ul a,li.current-menu-ancestor ul a:visited, li.current-menu-ancestor ul a:link {text-decoration:none;}

    /** Vertical menu support */
    ul.dropdown-vertical{ min-width:160px; }
    ul.dropdown-vertical li { background:#000 url(‘images/shiny-black/menu_bg.jpg’) repeat-x; height:30px; }
    ul.dropdown-vertical ul { border-bottom:0px; }
    ul.dropdown-vertical ul li { background:transparent; height: auto; }

    Gin Hogenes

    (@ginh)

    11 jaren, 10 maanden geleden

    okj doen we het iets anders

    .sidebar .widget ul.sub-menu {
    margin-left: 160px;
    right: -70%;
    }

    zo kan ook

    Dan hoef je die andere niet uit te zetten

    Thread starter yeldi

    (@yeldi)

    11 jaren, 10 maanden geleden

    Doorgevoerd zie hieronder, maar helaas het menu is nogal hardnekkig en wilt niet luisteren.

    /* Widget unordered lists
    ————————————————————– */
    .sidebar .widget ul { margin-left: 0px; }
    .sidebar .widget ul li a { color: #555; }
    .sidebar .widget ul li a:hover { color: #000; }
    .sidebar .widget ul li a { color: #555; }
    .sidebar .widget ul li a:hover { color: #000; }
    .sidebar .widget ul.sub-menu {
    margin-left: 160px;
    right: -70%;
    }

    Gin Hogenes

    (@ginh)

    11 jaren, 10 maanden geleden

    Is er een specifieke reden waarom die die plugin voor dropdown menu gebruikt?

    Ik zou je aanraden een andre plugin te proberen

    Thread starter yeldi

    (@yeldi)

    11 jaren, 10 maanden geleden

    Eigenlijk niet, ik zocht een leuk menu met fade in/out mogelijkheden naar buiten of uitklappen naar beneden, in ieder geval een menu waar ik dus sub menu’s naar wens in kan maken.

    Deze plugin is ook nog gratis dus dat was mooi meegenomen, ik heb wel lopen zoeken maar niks kunnen vinden.

    Ik sta zeker open voor suggesties.

14 reacties aan het bekijken - 1 tot 14 (van in totaal 14)
  • Het onderwerp ‘Dropdown menu widget uitlijnen in sidebar’ is gesloten voor nieuwe reacties.