Вопросы Теги

Чистое меню CSS не на стороне сверху

Асинхронный способ рекурсивно создавать каталоги: 

import fs from 'fs'

const mkdirRecursive = function(path, callback) {
  let controlledPaths = []
  let paths = path.split(
    '/' // Put each path in an array
  ).filter(
    p => p != '.' // Skip root path indicator (.)
  ).reduce((memo, item) => {
    // Previous item prepended to each item so we preserve realpaths
    const prevItem = memo.length > 0 ? memo.join('/').replace(/\.\//g, '')+'/' : ''
    controlledPaths.push('./'+prevItem+item)
    return [...memo, './'+prevItem+item]
  }, []).map(dir => {
    fs.mkdir(dir, err => {
      if (err && err.code != 'EEXIST') throw err
      // Delete created directory (or skipped) from controlledPath
      controlledPaths.splice(controlledPaths.indexOf(dir), 1)
      if (controlledPaths.length === 0) {
        return callback()
      }
    })
  })
}

// Usage
mkdirRecursive('./photos/recent', () => {
  console.log('Directories created succesfully!')
})
0
задан Temani Afif 13 July 2018 в 22:36
поделиться

1 ответ

Прежде всего ваше меню должно быть в тегах <body></body>. См. Здесь: 

<body bgcolor="black" text="white">
    <div class="pure-menu custom-restricted-width">
        <span class="pure-menu-heading">My Site</span>
        <ul class="pure-menu-list">
            <li class="pure-menu-item">
                <a href="#" class="pure-menu-link">Home</a>
            </li>
            <li class="pure-menu-item">
                <a href="newuser/register" class="pure-menu- 
                    link">Register</a>
            </li>
        </ul>
    </div>
    <div class="container">
        <div class="pure-u-24-24">
            <img src="/static/images/Logo.png" class="pure-img" />
            <h1>Welcome Home</h1>
            <br>
            <br>
            <br>
            <p>Please continue to check back for updates!</p>
            <br>
            <br>
            <p>More comming soon...</p>
        </div>
    </div>
</body>

Чтобы создать аналогичное меню боковой панели, поскольку PureCSS просто добавляет следующее: 

.custom-restricted-width {
    width: 10em;
    height: 100vh;
    position: fixed;
    z-index: 9;
    bottom: 0;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    background: #191818;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

и для контейнера, который вы можете добавить: 

.container {
    padding-left: 15em;
 }

Вот полный код: 

<head>
    <meta charset="utf-8">
    <!-- Check Compattibility with Pure CSS -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Check Compattibility with Pure CSS -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Check Compattibility with Pure CSS -->
    <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
    <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  -->
    <title>Home</title>
    <style>
    body {
        background-color: black;
        color: white;
    }

    .pure-menu {
        width: 10em;
        height: 100vh;
        position: fixed;
        z-index: 9;
        bottom: 0;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 1000;
        background: #191818;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .container {
        padding-left: 15em;
    }
    </style>
</head>

<body>
    <div class="pure-menu custom-restricted-width">
        <!-- <a href="#" class="pure-menu-link pure-menu-heading">Home</a> -->
        <span class="pure-menu-heading">My Site</span>
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
            <li class="pure-menu-item"><a href="newuser/register" class="pure-menu-link">Register</a></li>
        </ul>
    </div>
    <div class="container">
        <div class="pure-u-24-24">
            <img src="/static/images/Logo.png" class="pure-img" />
            <h1>Welcome Home</h1>
            <br>
            <br>
            <br>
            <p>Please continue to check back for updates!</p>
            <br>
            <br>
            <p>More comming soon...</p>
        </div>
    </div>
</body>

</html>
0
ответ дан martinsoender 17 August 2018 в 12:06
поделиться
  • 1
    Спасибо, что было полезно. Я немного смущен, почему мне нужно определить .pure-меню. Я думал, что это будет то, что содержится в таблице стилей, которая вызывается в верхней части. Также просто вопрос и точка особого. Кажется, что в вашем полном примере кода отсутствуют две верхние строки кода: & lt;! DOCTYPE html & gt; & Lt; & HTML GT; – Ben 14 July 2018 в 00:34
  • 2
    Привет Бен, класс .pure-menu должен был просто перезаписать текущий стиль меню с новым запрошенным вами вами. Таким образом, вы можете избавиться от класса .custom-restricted-width. Вы могли бы назвать класс чем угодно и добавили стиль на основе этого класса. Вы абсолютно правы, что мне не хватает <!DOCTYPE html> вверху, чтобы убедиться, что новые браузеры правильно отображают контент. – martinsoender 14 July 2018 в 08:25
  • 3
    Может быть, я чего-то не хватает. Я вижу, что .pure-menu, как вы определили, перезапишет класс. У меня просто сложилось впечатление, что у PureCSS были встроены такие типы стилей, и именно поэтому я назвал class="pure-menu" в первую очередь. – Ben 14 July 2018 в 22:33
  • 4
    Это не будет специально переписывать весь класс. Только декларации, которые уже определены для класса .pure-menu из их библиотеки. Итак, предположим, что они уже определили width: 35em, но вы хотите width: 15em - тогда вы будете переписывать текущую ширину определения вместо объявления всего нового класса. – martinsoender 15 July 2018 в 19:25