2
votes

Rendre le menu de l'interface utilisateur sémantique réduit et réactif

J'ai regardé partout dans la documentation, et rien. Je recherche une fonction de réduction de la barre de navigation similaire utilisée dans le bootstrap avec le hamburger (je peux cliquer sur) sur les éléments de côté et de menu à l'intérieur. Veuillez aider. L'interface utilisateur sémantique semble bonne mais peut être difficile à utiliser

css semantic-ui

0 commentaires

3 Réponses :

0
votes

si vous comptez vers la sémantique la plus correcte, c'est que vous utilisez la liste des balises comme barre de navigation et que vous la cachez ou non avec javascript. Vraiment la sémantique html est très mauvaise, du code très complexe pour faire quelque chose de simple

0 commentaires

2
votes

Il s'agit d'une implémentation assez bonne (et simple) (crédit: https://codepen.io/ designosis / pen / LbMgya )

HTML

$('.ui.sidebar').sidebar({
  context: $('.ui.pushable.segment'),
  transition: 'overlay'
}).sidebar('attach events', '#mobile_item');

CSS

#content {
  min-height: 100px;
}
.ui.grid{
  padding: 0 !important;
}
.pushable.segment{
  margin: 0 !important;
}

JavaScript

<div class="ui grid">

    <div class="computer only row">
        <div class="column">
            <div class="ui menu">
                <a class="item">Menu Item A</a>
                <a class="item">Menu Item B</a>
                <a class="item">Menu Item C</a>
                <a class="item">Menu Item D</a>
            </div>
        </div>
    </div>

     <div class="tablet mobile only row">
        <div class="column">
            <div class="ui menu">
                <a id="mobile_item" class="item"><i class="bars icon"></i></a>
            </div>
        </div>
    </div>

</div>

<div class="ui pushable segment">
        <div class="ui sidebar vertical menu">
            <a class="item">Menu Item A</a>
            <a class="item">Menu Item B</a>
            <a class="item">Menu Item C</a>
            <a class="item">Menu Item D</a>
        </div>
        <div class="pusher">
                <div id="content" class="ui segment">
                        Content here
                </div>
         </div>
</div>

0 commentaires

2
votes

Voici un composant NavMenu réductible que j'ai créé à l'aide du composant Responsive disponible dans Semantic-UI-React:

import React, { useState } from 'react';
import { Menu, Responsive, Dropdown, DropdownMenu } from 'semantic-ui-react';
import { withRouter } from 'react-router-dom';
import LogoutModal from './LogoutModal';

function NavMenu(props) {
    const [activeItem, setActiveItem] = useState('Laptop Item')
    const [showModal, setShowModal] = useState(false)


    return (
        <div>
            <Menu pointing secondary>
                <Responsive as={Menu.Item} minWidth={790}
                    name='Laptop Item'
                    active={activeItem === 'Laptop Item'}
                    onClick={() => setActiveItem('Test Item')}
                />
                <Responsive as={Menu.Item} minWidth={790}
                    name='Laptop Item 2'
                    active={activeItem === 'Laptop Item 2'}
                    onClick={() => setActiveItem('Test Item 2')}
                />
                <Responsive as={Menu.Item} minWidth={790}
                    name='Laptop Item 3'
                    active={activeItem === 'Laptop Item 3'}
                    onClick={() => setActiveItem('Test Item 3')}
                />
                <Menu.Menu position = 'right'>
                    <Responsive as ={Menu.Item} minWidth={790}
                        name = "Sign Out"
                        onClick={() => setShowModal(true)}
                    />
                </Menu.Menu>
                <Responsive as ={Menu.Menu} maxWidth={789}  position='right'>
                    <Dropdown
                        item
                        icon ='bars'
                        >
                        <Dropdown.Menu>
                            <Dropdown.Item text='Mobile/Tablet Item 1'/>
                            <Dropdown.Item text='Mobile/Tablet Item 2'/>
                            <Dropdown.Item text='Mobile/Tablet Item 3'/>
                            <Dropdown.Item text='Sign Out'/>
                        </Dropdown.Menu>
                    </Dropdown>
                </Responsive>
            </Menu>
        </div>
    )
}

export default withRouter(NavMenu);

Je vais pour une barre de navigation traditionnelle avec des liens sur le côté gauche et un bouton de déconnexion sur le côté droit. Bien que la largeur en pixels d'un iPad (comme indiqué dans les outils de développement Chrome) soit de 768px, pour une raison quelconque, le point d'arrêt est de 790px pour moi (appréciez si quelqu'un peut me dire pourquoi). C'est pourquoi la largeur minimale pour «Éléments pour ordinateur portable» est de 790 et maxWidth pour «Éléments pour mobile / tablette» est de 789.

Je n'ai pas trouvé le composant réactif dans la documentation Semantic-UI. Il est répertorié sous "Addons" dans Semantic-UI-React.

Si vous n'utilisez pas React, une alternative consiste à implémenter la barre latérale pour les utilisateurs mobiles.

0 commentaires